Tooltips for disabled radio and checkbox

[jessiehuff]

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]

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