patternfly / patternfly/patternfly-react

Tooltips for disabled radio and checkbox

Open
#3,791 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11y Stale
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-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)


Jira Issue: PF-208

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.