patternfly
Tooltip: investigate how to improve screen reader experience and update
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:
- [ ] #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.
- [ ] https://github.com/patternfly/patternfly-react/issues/9517 - MenuItem's aren't having Tooltips applied/announced correctly
- [x] https://github.com/patternfly/patternfly-react/issues/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
- [x] #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
disabledattribute 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:
- [x] #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 https://github.com/patternfly/patternfly-react/pull/8052#discussion_r981179134, then that plus other updates made to Tooltip (adding in aria-live for the ref examples) would cover resolving this issue.
Completed issues:
- [x] #6311
- [x] #6109
- [x] #1457
- [x] #1655
- [x] #1894
- [x] #7096
- [x] https://github.com/patternfly/patternfly-org/issues/2596
- [x] https://github.com/patternfly/patternfly-react/issues/7331
be sure our examples meet a11y standards. i.e. they dont put tooltips on static elements
tooltips which change dynamically need to be accessible: https://github.com/patternfly/patternfly-react/issues/1655