-
Notifications
You must be signed in to change notification settings - Fork 15
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
Replace Tooltips package #9
Comments
OR we could replace ALL tooltips with not-tooltips. For example, show a dashed underline on settings that usually trigger tooltips and on click expand descriptions inline. |
I think we can work with react-tooltip |
I think react-tooltip is probably fine but can you please check that it is accessible? Maybe start by creating a branch and add 1 tooltip using react-tooltip and check if you can read its contents with a screen reader and make the tooltip appear using a keyboard? If you can confirm that it will be accessible, then we can continue with that package! |
I tried it in the new branch, and it's working fine, the same as react-tippy |
The tooltip needs to be keyboard accessible so a person using only a keyboard and no mouse should be able to access the information in the tooltip. If you use the tab key to tab to the tooltip trigger element, such as a button then the tooltip should appear when the button has focus. You can read about screen readers here: |
I think when the user has focus on "Accuracy", the screen reader should read out something like "Accuracy. Assuming accurate words are typed within stroke count targets". Does that make sense? But I don't really mind how the tooltip package implements the tooltip so long as one way or another people using keyboards and screen readers and other devices can all access the same information. Some packages require the user to press Enter or Spacebar on "Accuracy" to activate and focus the tooltip before reading out "Assuming accurate words are typed within stroke count targets". I would be ok with that approach too, so long as everyone can access all the information. |
Sorry, earlier I was busy with my internship. |
@MohitBansal321 the latest code in Typey Type has made some changes that adds more tooltips and other changes that might cause git merge conflicts if you've already been working on a branch for this issue. If you have not started, make sure you pull the latest code before creating a new branch to work on this. There is also a new issue, #151, to update icons that might interest you. Those icons are also wrapped in Tooltips that would also cause git merge conflicts for any branches that change tooltips at the same time. If that issue interests you, it would be simpler to get 1 PR for one issue merged before creating a new branch for the other issue. If you run into merge conflicts and if you need help resolving them, this looks like a decent guide: https://www.freecodecamp.org/news/how-to-handle-merge-conflicts-in-git/ |
Overview
Typey Type is currently using a fork of react-tippy that supports custom tag elements for the tooltip trigger. React tippy has some drawbacks and appears to be unmaintained now. It's time to replace it.
Details
A replacement tooltip library needs to have/be:
abbr
,span
,div
,a
, or an icon (e.g. where icon hastabindex=0
).react-tippy
the console is full of errors in production).OutboundLink
for external links with icons and "opens in new tab" tooltip.Does NOT need:
Approach
react-tippy
.Options
Some places to start looking:
The text was updated successfully, but these errors were encountered: