Tooltips for disabled radio and checkbox

[jessiehuff]

trafficstars

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)

[seanforyou23]

I was able to come up with a few implementations between #3817 and #3845 that each facilitates tooltips for disabled radios, but in discussing the direction of the options we determined there is a design solution that's better suited to address the problem for radios. Not sure when/where that will manifest, but below are the sample implementations in case it is helpful.

Wrap the entire disabled Radio component in a tooltip https://patternfly-react-pr-3817.surge.sh/documentation/react/components/radio#inoperable-with-wrapping-tooltip

Wrap only the disabled radio input element in a tooltip https://patternfly-react-pr-3817.surge.sh/documentation/react/components/radio#inoperable-with-nested-tooltip

Wrap anything in a tooltip using a "Focusable" component https://patternfly-react-pr-3845.surge.sh/documentation/react/components/focusable#wrapping-disabled-radio-with-tooltip

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[thatblindgeye]

For now will remove the Stale label and keep a pulse check on this issue. I've also updated this issue to focus both radio and checkbox, since they are closely related.

FWIW this may also require:

• Core update, to add a pf-m-aria-disabled class -- right now the component only suppots pf-m-disabled, at least on the label text.
• a prop for passing a Tooltip to the component so that it wraps the correct element -- right now in a quick test, wrapping the Radio component in a Tooltip causes the tooltip to render possibly strangely if the Radio takes up its entire horizontal space. Additionally, a tthat point focusing the radio button doesn't trigger the tooltip since the trigger is technically the wrapper that contains the input and label.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.