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] Content accessible via pointer #1490

Merged
merged 5 commits into from
Jul 7, 2022
Merged

[Tooltip] Content accessible via pointer #1490

merged 5 commits into from
Jul 7, 2022

Conversation

andy-hook
Copy link
Collaborator

@andy-hook andy-hook commented Jun 23, 2022

fixes #620

Of the options available we decided on:

Create an invisible track from the triggering element to the tooltip content that won't trigger mouseOut event.

CleanShot.2022-06-24.at.12.34.23.mp4

@andy-hook andy-hook force-pushed the 620-tooltip-wcag branch 8 times, most recently from 5b6c67c to 4ec4ba5 Compare June 23, 2022 18:15
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
@andy-hook andy-hook marked this pull request as ready for review June 23, 2022 18:34
packages/react/tooltip/src/Tooltip.stories.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.stories.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.stories.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Outdated Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Show resolved Hide resolved
packages/react/tooltip/src/Tooltip.tsx Show resolved Hide resolved
Copy link
Collaborator

@benoitgrelard benoitgrelard left a comment

Choose a reason for hiding this comment

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

Just one question left (maybe a rename needed) but otherwise it's good to go from me.

Obviously we need to remove the debug area first though 😀

const isPointerDownRef = React.useRef(false);
const hasTriggerActivated = React.useRef(false);
Copy link
Collaborator

Choose a reason for hiding this comment

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

What does this one mean?

When I read the name I thought it was about the trigger activation (click, keydown space/enter) but looking at where the ref is updated it seems to mean something else.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We needed to use pointerMove after all for the polygon bleed change. Because of this we only want to trigger an open on the very first pointerMove event, this flag is to describe that the tooltip "has opened" already so don't do it again until we leave and come back.

Perhaps something like hasPointerMoveOpened?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yeah that makes more sense.

@andy-hook andy-hook merged commit db82397 into main Jul 7, 2022
@andy-hook andy-hook deleted the 620-tooltip-wcag branch July 7, 2022 15:20
luisorbaiceta pushed a commit to luisorbaiceta/primitives that referenced this pull request Jul 21, 2022
* Remain open when pointer over content

* Feedback

* Additional simplification

* Improve grace area accuracy

* Naming, remove debugging area
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Tooltip] WCAG 2.1 AA Hover Content Disappearing
2 participants