@workday/canvas-kit-docs/dist/mdx/accessibility/Headers.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock} from '@workday/canvas-kit-docs';

import {Basic as GlobalHeaderBasic} from './examples/GlobalHeader';


## Global Header

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`.

### Tooltip usage

- The `default` variant `<Tooltip>` is used on all of the icon buttons, which will automatically set
  the `aria-label` of the child component to the `title` prop string.
- The `describe` variant `<Tooltip>` is used instead on the "MENU" button because this is a text
  button. This variant will instead set `aria-describedby` to the child component referencing the
  the tooltip's text "Global Navigation" to ensure that the visible button text "MENU" is not
  overriden by an `aria-label`.

### 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} />