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

[a11y] donation banner has two main concerns #10298

Closed
CharlesNepote opened this issue May 16, 2024 · 0 comments · Fixed by #10299
Closed

[a11y] donation banner has two main concerns #10298

CharlesNepote opened this issue May 16, 2024 · 0 comments · Fixed by #10299
Assignees
Labels
accessibility ♿ Ensuring Open Food Facts is accessible to all

Comments

@CharlesNepote
Copy link
Member

CharlesNepote commented May 16, 2024

The donation banner is displayed only with a mouse click: <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>.

The analyzer we use reports two main issues:

  1. The mouse event attribute doesn't have a keyboard equivalent: see https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR20
  2. The element is a forced user interface control without the proper role attribute: see https://www.w3.org/WAI/WCAG21/Techniques/failures/F59

For the first one, it should be possible to open it thanks to keyboard. The solution seems to only add a keyboard event:

<span id="hide-donate-banner" class="material-icons" onclick="DonationButton();" onkeypress="DonationButton();" role="button">close</span>

The second one is about giving a role to the span, or better replace it by a button tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility ♿ Ensuring Open Food Facts is accessible to all
Development

Successfully merging a pull request may close this issue.

2 participants