A context selector can be used in addition to global navigation when the data or resources you show in the interface need to change depending on the user’s context.
Keyboard interaction of the context selector uses Tab to navigate to the context selector toggle, Enter or Space to activate the context selector, and Tab to navigate through the options. The Esc key should automatically close the menu.
To make context selector accessible:- Add
screenReaderLabel={input label}.
In general, the context selector component already has accessibility built in. HHowever, if you’d like to customize it, edit the following:
React component | React prop | Which HTML element it appears on in markup | Explanation |
|---|---|---|---|
ContextSelector | screenReaderLabel | #pf-context-selector-label-id-0 hidden span on context selector | Labels the Context Selector for screen readers. |
ContextSelector | searchButtonAriaLabel | .pf-v6-c-button search button | Aria-label for the Context Selector Search button |
