Skip to content

make tooltips hover-able and dismiss-able#35151

Open
RyanBerliner wants to merge 1 commit into
twbs:mainfrom
RyanBerliner:tooltip-accessibility
Open

make tooltips hover-able and dismiss-able#35151
RyanBerliner wants to merge 1 commit into
twbs:mainfrom
RyanBerliner:tooltip-accessibility

Conversation

@RyanBerliner

@RyanBerliner RyanBerliner commented Oct 9, 2021

Copy link
Copy Markdown
Contributor

closes #28411

Makes tooltips wcag 1.4.13 conforming by providing a means to dismiss tooltips without moving the cursor, and allows users to hover the tooltip content. Tooltips are dismissed with the escape key.

Preview Link

Resources

Todo

  • confirm & revise desired behavior
  • fix & add tests

Comment thread js/src/tooltip.js Outdated

@RyanBerliner RyanBerliner Oct 9, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

* selector feels a little wrong to me here, though it accomplishes what I want, which is "no matter where user focus is, hitting escape should (maybe) dismiss the tooltip" and also "listen on the capturing phase to stop propagation (like inside a modal)". Open to other solutions to this.

@RyanBerliner
RyanBerliner force-pushed the tooltip-accessibility branch 2 times, most recently from 74ae2e5 to d415b79 Compare October 24, 2021 15:25
@RyanBerliner

Copy link
Copy Markdown
Contributor Author

I'm encountering some irregular failures with tests referring to escape key handling in offanvas, dropdown, and modals. Here is an example in the latest test run that only affected off canvas in node v16. So far I haven't been able to replicate these consistently in any node version (12, 14, 16) locally. Sometimes I will get them to fail, but not consistently enough to investigate a cause.

I'm taking this PR out of draft status knowing this still needs to be fixed, and I'm hoping anyone with ideas might be able to shed some light onto what could be causing these failures.

@RyanBerliner
RyanBerliner marked this pull request as ready for review October 28, 2021 01:09
@RyanBerliner
RyanBerliner requested a review from a team as a code owner October 28, 2021 01:09
@GeoSot
GeoSot force-pushed the tooltip-accessibility branch from d415b79 to 2f1ac2a Compare November 2, 2021 23:10
@GeoSot

GeoSot commented Nov 18, 2021

Copy link
Copy Markdown
Member

Hey @RyanBerliner

Sorry for keeping this MR stale and many thanks for your contribution. I have planned some clearance and tidiness MRs first for tooltip, in order to increase its maintainability (waiting to be addressed), and will return on this.

Ps: if you want to help us, do not hesitate to ping us on slack

@RyanBerliner

Copy link
Copy Markdown
Contributor Author

@GeoSot I'm seeing lots of the tooltip tidiness work you mentioned being merged in the past couple weeks. Let me know when you believe most of your refactoring is complete and I can get this pull request rebased at that point. thanks!

@GeoSot GeoSot self-assigned this Dec 9, 2021
@mdo

mdo commented Dec 29, 2022

Copy link
Copy Markdown
Member

@GeoSot Is this still relevant or can it be closed as stale?

@RyanBerliner

Copy link
Copy Markdown
Contributor Author

FWIW - I am available to rebase and finish this. I've been awaiting confirmation that most of the tooltip refactoring is complete. Please do let me know when that is the case and I'll can get this wrapped up if its still welcomed.

The functionality here has continued to be a highly requested feature from my colleagues over the past year so I'm very interested in getting this completed! 👍

@GeoSot

GeoSot commented Dec 30, 2022

Copy link
Copy Markdown
Member

As @RyanBerliner said. He had stopped just to give us time, stabilize the existing implementation . So please can you make a rebase?

@RyanBerliner

Copy link
Copy Markdown
Contributor Author

I have rebased + refactored this PR to be compatible with all the tooltip changes over the past year. Before I add more tests I'd like to confirm that the behavior implemented is what is expected. Here is what this PR does specifically

  • "manual" trigger tooltips receive no change in functionality
  • "click" "hover" "focus" triggered tooltips are now dismissible with the escape key
  • "hover" "focus" triggered tooltips now allow interaction inside the floating tooltip element with mouse or keyboard

This functionality is currently in place and available to play with at the preview link - is this the desired behavior?

@RyanBerliner
RyanBerliner force-pushed the tooltip-accessibility branch from 85446da to 53d64b5 Compare July 8, 2024 23:46
@RyanBerliner

Copy link
Copy Markdown
Contributor Author

Hi all, it had been a while since I gave this PR any attention. I just did a rebase though and things are still working as intended. If this is still a welcomed addition please let me know your thoughts on the behavior, and upon confirmation/feedback I can get my remaining todo's here wrapped.

@carlosmintfan

Copy link
Copy Markdown

Great! Finally getting able to hover over tooltips then, so you can also put links in it! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Needs review

Development

Successfully merging this pull request may close these issues.

Tooltip / Popover: WCAG 2.1 - Content should stay visible on hover

6 participants