search

robby1066 / keepposted-help

Documentation, Issue Tracker, and Repository of Knowledge For Keep Posted (www.keepposted.io) — A way to keep teams informed and connected without disrupting their focus.
https://www.keepposted.io
1 stars 0 forks source link

Add accessible tooltips to actions that are only labeled by an image. #77

Closed robby1066 closed 3 years ago

robby1066 commented 3 years ago

What's the problem you're hoping this new feature will solve?

There are several places within the app where actions can be taken on elements, and the actions are not clearly labeled. These are mostly (if not always) in the top right corner of blocks, where space is at a premium.

The icons that a person taps/clicks on all have proper alt text, so they are accessible to screen readers, but they are still possibly confusing to people not using screen readers, who have to interpret the meaning of the icon.

Description of feature

Add a tooltip that shows after a short delay on actions that are only labeled with an icon.

Alternatives and workarounds

The title attribute is populated on some of these actions, but the text is inconsistent.

Additional context

Screenshots:

Screenshot 2021-07-26 at 12 16 51 Screenshot 2021-07-26 at 12 17 36

robby1066 commented 3 years ago

This has been added and deployed. The tooltip shows after a 1 second delay. It can be added to any element by adding a classname and a label via the aria-label attribute.

https://user-images.githubusercontent.com/342510/127540869-37145eb9-738d-42dd-a36d-1af025e8352b.mp4