Tooltip: investigate how to improve screen reader experience and update

[jessiehuff]

Describe the issue. What is the expected and unexpected behavior?
I've noticed that our tooltip examples aren't always announced in VO. The only example that has solidly worked when I've tested lately has been the Options example, and my theory behind this is the placement in the DOM. We should investigate how we can make sure that our tooltips work in a screen reader (I'd like us to ideally also test this in other screen readers as well like NVDA and JAWS). I'm wondering if we can treat it similarly to how we treat alerts and add an aria-live to let screen readers know where the content will be updated and make sure it's aware of these changes.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Open VO and test our tooltip examples. In Chrome, the first example works along with the Options example. In Safari, only the Options example works. I'd like to make sure all implementations of tooltip work so that we can ensure our products' tooltips work in their implementations.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
bug

Remaining issues in this epic:

• Tooltips for disabled radio and checkbox #3791 - Still needs to be completed. The linked issue has a few options with their own pros. Wrapping the entire Radio component in a Tooltip will result in the tooltip being centered above the entire Radio, which visually may not be the desired effect if the Radio doesn't have a lot of content, while wrapping just the radio input in a Tooltip provides a smaller area for users to trigger it.
• Bug - MenuItem- Tooltips on MenuItems aren't being announced #9517 - MenuItem's aren't having Tooltips applied/announced correctly
• Bug - [Dropdown] - [Dropdown tooltips are not accessible by JAWS and NVDA] #7584 - From @thatblindgeye: In testing the dropdown component again, this time both with JAWS and NVDA, I was able to get the tooltips in the Basic example to get announced in both screen readers. This may require another test from at least 2 people to confirm which behavior is more reliable. UPDATE 8/17/2023: the deprecated Dropdown still works for me with NVDA/JAWS, however the new implementation suffers the same issue as mentioned in the above issue 9517 since it's using Menu under the hood
• DualListSelectorControl tooltips remain visible after VO blur #7021 - This may not require completion due to the refactor that will be done for the Dual List Selector component. UPDATE 8/17/2023: This can be resolved by removing the disabled attribute from the controls that have it, so that instead they're only aria-disabled. The tooltip does de-render once focus is moved out of this controls group, though.

No longer applicable:

• Tooltip examples aren't read by VO in Safari #4446 - This is less an issue with VO/Safari and more the fact that tooltips on static elements aren't reliably announced. If the basic example is updated based on chore(Tooltip): converted examples to typescript #8052 (comment), then that plus other updates made to Tooltip (adding in aria-live for the ref examples) would cover resolving this issue.

Completed issues:

• Tooltips on tabs are currently not accessible #6311
• Tooltip examples are not accessible on dropdown items. #6109
• Tooltip - persistent on hover #1457
• Tooltip variation - announce contents as alert #1655
• Tooltips for disabled elements #1894
• CodeBlock: Tooltips in code block examples no VO accessible #7096
• Add a11y documentation for Tooltip patternfly-org#2596
• Bug - Tooltip - contents for ref variant not announced by assistive tech #7331

---

Jira Issue: PF-200

[nicolethoen]

be sure our examples meet a11y standards. i.e. they dont put tooltips on static elements

[nicolethoen]

tooltips which change dynamically need to be accessible: #1655