For a tooltip to be accessible for keyboard-only users, the element with the tooltip needs to be able to receive keyboard focus. Elements like <button> that support the disabled attribute cannot receive keyboard focus.
To continue to render these elements as disabled but enable keyboard focus, the following changes are needed:
- Remove
disabled
- Add
aria-disabled="true"
- Make sure the
pf-m-disabled class or similar is included on the element to apply the disabled styling.
- If the element is a link, remove
tabindex="-1"
We should update all interactive elements to include a prop that allows the consumer to make the element disabled but focusable so the element can be used with the Tooltip component. This prop should apply the appropriate attributes and classes for the given element.
Unless someone has a better suggestion, the prop could be named isDisabledFocusable (totally open to suggestions on this one)
Components that should be updated are:
We could simplify this list if there are any components here that we think are less likely to be disabled and with a tooltip.
For a tooltip to be accessible for keyboard-only users, the element with the tooltip needs to be able to receive keyboard focus. Elements like
<button>that support thedisabledattribute cannot receive keyboard focus.To continue to render these elements as disabled but enable keyboard focus, the following changes are needed:
disabledaria-disabled="true"pf-m-disabledclass or similar is included on the element to apply the disabled styling.tabindex="-1"We should update all interactive elements to include a prop that allows the consumer to make the element disabled but focusable so the element can be used with the Tooltip component. This prop should apply the appropriate attributes and classes for the given element.
Unless someone has a better suggestion, the prop could be named
isDisabledFocusable(totally open to suggestions on this one)Components that should be updated are:
We could simplify this list if there are any components here that we think are less likely to be disabled and with a tooltip.