docs: Refreshing GlobalHeader Storybook Example (#2891)

Fixes: none 

The Storybook example `GlobalHeader` had some opportunities for improved accessibility. 
1. Added accessible `Tooltip` to icon buttons
2. Replaced old `SearchField` with `Combobox`
3. Used `AriaLiveRegion` to demonstrate screen reader supported `CountBadge`
4. Updated style packages

[category:Documentation, Examples]

Release Note:
Optional release note message. Changelog and release summaries will contain a pull request title. This section will add additional notes under that title. This section is not a summary, but something extra to point out in release notes. An example might be calling out breaking changes in a labs component or minor visual changes that need visual regression updates. Remove this section if no additional release notes are required.

Co-authored-by: William Stanton <[email protected]>
Co-authored-by: manuel.carrera <[email protected]>

modules/react/_examples/stories/GlobalHeader.stories.mdx

@@ -0,0 +1,37 @@
+import {Basic} from './examples/GlobalHeader';
+
+<Meta title="Examples/GlobalHeader" />
+
+# GlobalHeader Example
+
+Developers building internal Workday applications will likely not need to create this component.
+However, if you're building components to be used outside of Workday, this is a helpful reference
+for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={Basic} />
+
+## Tooltip usage
+
+- The `default` variant Tooltip is used on all of the icon buttons, which will automatically set the
+  Tooltip's text to the accessible name. (`aria-label`)
+- The `describe` variant Tooltip is used instead on the "MENU" button because this is a text button.
+  The Tooltip's text "Global Navigation" will instead be assigned to the accessible description to
+  ensure that the visible button text "MENU" is not overriden.
+
+## Count badge usage
+
+When `<CountBadge>` is used as a sibling component for button, the `aria-describedby` property is
+set on the button referencing the `id` value of the `<CountBadge>`. This practice helps support
+users depending on screen readers to describe both the name of the button and the value of the
+`<CountBadge>`.
+
+When a web app dynamically updates count badges in real-time, consider the following accessibility
+enhancements to support live, real-time announcements for screen readers:
+
+- The `<CountBadge>` component is rendered as a child of the `<AriaLiveRegion>` container.
+- The `<AriaLiveRegion>` container is assigned a name by using `aria-labelledby` to reference the
+  name of the icon button `"Notifications"`.
+- The `<AccessibleHide>` component is used following the `<CountBadge>` to render a hidden word
+  "new" that only screen reader users can access.
+- When the `<CountBadge>` is updated, then screen readers can automatically describe (in real-time)
+  the name of the live region, "Notifications" and the text updated inside of it, "1 new".

modules/react/_examples/stories/mdx/Headers.mdx

@@ -13,6 +13,32 @@ Developers building internal Workday applications will likely not need to create
 However, if you're building components to be used outside of Workday, this is a helpful reference
 for building a global navigation header that looks like our internal `GlobalHeader`.
 
+## Tooltip usage
+
+- The `default` variant Tooltip is used on all of the icon buttons, which will automatically set the
+  Tooltip's text to the accessible name. (`aria-label`)
+- The `describe` variant Tooltip is used instead on the "MENU" button because this is a text button.
+  The Tooltip's text "Global Navigation" will instead be assigned to the accessible description to
+  ensure that the visible button text "MENU" is not overriden.
+
+## Count badge usage
+
+When `<CountBadge>` is used as a sibling component for button, the `aria-describedby` property is
+set on the button referencing the `id` value of the `<CountBadge>`. This practice helps support
+users depending on screen readers to describe both the name of the button and the value of the
+`<CountBadge>`.
+
+When a web app dynamically updates count badges in real-time, consider the following accessibility
+enhancements to support live, real-time announcements for screen readers:
+
+- The `<CountBadge>` component is rendered as a child of the `<AriaLiveRegion>` container.
+- The `<AriaLiveRegion>` container is assigned a name by using `aria-labelledby` to reference the
+  name of the icon button `"Notifications"`.
+- The `<AccessibleHide>` component is used following the `<CountBadge>` to render a hidden word
+  "new" that only screen reader users can access.
+- When the `<CountBadge>` is updated, then screen readers can automatically describe (in real-time)
+  the name of the live region, "Notifications" and the text updated inside of it, "1 new".
+
 <ExampleCodeBlock code={GlobalHeaderBasic} />
 
 ## Page Header