patternfly / patternfly/patternfly-react
Tooltips for disabled radio and checkbox
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 9
Description
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-disabledclass 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)
Jira Issue: PF-208
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the interactive elements that render disabled controls and the Tooltip component. Inventory the affected buttons, links, radio buttons, and checkboxes, then verify each can remain visually disabled while receiving keyboard focus. Done means the affected elements expose the requested focusable-disabled behavior consistently without losing disabled styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100