Skip to content
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

Tooltip fixes on hover and ESC #16476

Merged
merged 11 commits into from
May 22, 2024

Conversation

guidari
Copy link
Contributor

@guidari guidari commented May 15, 2024

Closes #16152

Added an useIsomorphicEffect and useCallBack to handle the ESC key when the user is hovering the Tooltip.

Changelog

New

  • Added onMouseEnter in PopoverContent to keep the state open when hovering the content.
  • Added test for the Escape key while the tooltip trigger is on hover state.

Testing / Reviewing

  • Go to Tooltip default stories
  • Make sure there is no regressions.

Copy link

netlify bot commented May 15, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit e8471ce
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/6644a57aa502ab0009efd4a8
😎 Deploy Preview https://deploy-preview-16476--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented May 15, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 5833ba2
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/664de00d8d3f2100089438db
😎 Deploy Preview https://deploy-preview-16476--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functionally looks good, though there's one thing to note, this may continue to act oddly in the storybook due to the story being in an iframe.

If focus is not within the iframe the hover interaction will work but the escape key does not. Clicking into the iframe and then trying again the escape key works and closes it. I don't think there's anything to fix here, but if the issue is reported again I'd like to have this comment to point to 😄

CleanShot.2024-05-15.at.12.27.38.mp4

Copy link

netlify bot commented May 22, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 5833ba2
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/664de00d227e2d000814bc40
😎 Deploy Preview https://deploy-preview-16476--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@alisonjoseph alisonjoseph added this pull request to the merge queue May 22, 2024
Merged via the queue into carbon-design-system:main with commit db816e6 May 22, 2024
21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[a11y]: tooltip's behaviour fails WCAG in two ways
3 participants