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

Add localized aria-labels to glyph buttons #10161

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

fkellner
Copy link
Contributor

@fkellner fkellner commented Apr 4, 2024

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?

  • 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?

  • 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.

Florian Kellner added 3 commits April 4, 2024 13:38
Modify tooltip enhancer to also provide `aria-label`-property to wrapped objects
(most commonly glyph-only buttons). Does localization on a best-effort basis, trying
to unwrap messages passed in as tooltip prop.

On Behalf of DB Systel
Use accessible tooltip enhancer in Locate, Redo, Undo, Zoom and Toggle button components

On Behalf of DB Systel
…tton

This required adding some new text to the translation dictionaries.

On Behalf of DB Systel
@tdipisa tdipisa added this to the 2024.01.01 milestone Apr 4, 2024
@tdipisa tdipisa removed this from the 2024.01.01 milestone Apr 4, 2024
@tdipisa tdipisa linked an issue Apr 4, 2024 that may be closed by this pull request
1 task
@tdipisa
Copy link
Member

tdipisa commented Apr 4, 2024

@fkellner thank you so much for your contribution. We will review as soon as possible.
@allyoucanmap, let's evaluate a possible inclusion in 2024.01.01 (waiting for the review).

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

Successfully merging this pull request may close these issues.

WCAG Accessibility Improvements - Low Hanging Fruits
2 participants