MapStore2 icon indicating copy to clipboard operation
MapStore2 copied to clipboard

Add localized aria-labels to glyph buttons

Open fkellner opened this issue 10 months ago • 1 comments

Description

MapStore uses a lot of glyph-only buttons with text tooltips. While these tooltips provide text for the buttons via aria-labeledby properties, they are only effective when the tooltips are being rendered (and the id tying them together is often broken).

This PR proposes a change to the tooltip enhancer, which adds the tooltip text as aria-label to the wrapped buttons.

It also refactors some buttons to also use the tooltip enhancer, and adds localized aria-labels to a few glyph buttons without tooltip.

We would be interested in your opinion whether this is a small enough change to accept, or whether it introduces unnecessary complexity. However, this is not a high priority issue.

What kind of change does this PR introduce?

  • [x] Feature

Issue

What is the current behavior?

#10158

What is the new behavior? Most glyph buttons now have a reliably present, localized aria-label.

Breaking change

Does this PR introduce a breaking change?

  • [x] No

Other useful information

  • The most important change is the one to the tooltip enhancer (first commit). To achieve localization without needing to modify existing usages, the props of a Message component passed as tooltip prop are read out. Maybe this is a little "hacky".
  • Using the tooltip enhancer (and ButtonWithTooltip component) wherever possible seems like a sensible refactoring whether you like the aria-label change or not. If you do not want to merge this PR, I could do a new one just with this commit.

fkellner avatar Apr 04 '24 11:04 fkellner