-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add Esc key support to dismiss tooltips #5147
feat: add Esc key support to dismiss tooltips #5147
Conversation
Deploy preview for the-carbon-components ready! Built with commit 6e66c13 https://deploy-preview-5147--the-carbon-components.netlify.com |
Deploy preview for carbon-elements ready! Built with commit 6e66c13 |
Deploy preview for carbon-components-react failed. Built with commit 6e66c13 https://app.netlify.com/sites/carbon-components-react/deploys/5e2f6c1b67651a000b4b0a43 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great to see the fix @emyarod!
packages/components/src/components/tooltip/tooltip--definition.js
Outdated
Show resolved
Hide resolved
packages/components/src/components/tooltip/tooltip--definition.js
Outdated
Show resolved
Hide resolved
packages/components/src/components/tooltip/tooltip--definition.js
Outdated
Show resolved
Hide resolved
packages/react/src/components/TooltipDefinition/TooltipDefinition.js
Outdated
Show resolved
Hide resolved
5e55791
to
defed0c
Compare
Thank you for the updates @emyarod! |
9ea4bd9
to
ad2bf18
Compare
aab6ae7
to
ad2bf18
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Closes #3615
Refs w3c/aria-practices#127 w3c/wcag#914 w3c/wcag#915
This PR adds Esc key support to dismiss all visible definition and icon tooltips. It appears that the pattern is still a work in progress on the w3c's end, so we will need to monitor the threads above to watch for any new changes or developments
Changelog
New
bx--tooltip--hidden
class, applied for when the tooltip needs to be explicitly hidden (by esc key press)mouseenter
andkeydown
events to correctly apply and remove the class depending on if a tooltip can/should be displayedTesting / Reviewing
trigger a tooltip (or multiple tooltips) by hover and/or focus and dismiss them with Esc, ensure that tooltips are still usable as intended