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

fix: Banner accessibility #10299

Merged
merged 4 commits into from
May 21, 2024
Merged

fix: Banner accessibility #10299

merged 4 commits into from
May 21, 2024

Conversation

Valimp
Copy link
Collaborator

@Valimp Valimp commented May 16, 2024

What

Accessibility for donate banner
Give role to spans
Alt to images
Make the close button accessible

Related issue(s) and discussion

@Valimp Valimp requested a review from a team as a code owner May 16, 2024 10:26
@github-actions github-actions bot added CSS Template::Toolkit The templating toolkit used by product opener. The starting point for HTML/JS/CSS fixes. 🎁 donations labels May 16, 2024
@Valimp Valimp added the accessibility ♿ Ensuring Open Food Facts is accessible to all label May 16, 2024
@Valimp Valimp requested a review from CharlesNepote May 16, 2024 10:30
<div class="donation-banner__close">
<span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
<button id="hide-donate-banner" class="material-icons modest" onclick="DonationButton();" onkeypress="DonationButton();">close</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the "modest" class?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a sveetoy class to make the button smaller

@stephanegigandet
Copy link
Contributor

Thanks for the PR!

If there are any visual differences, could you add before / after screenshots?

@Valimp
Copy link
Collaborator Author

Valimp commented May 16, 2024

Before:
Capture d’écran 2024-05-16 à 12 42 49

After :
Capture d’écran 2024-05-16 à 12 42 00

there is a small difference at the button, is this problematic?

@stephanegigandet
Copy link
Contributor

there is a small difference at the button, is this problematic?

Thanks, looks fine to me. The language is different though ;)

Copy link

Quality Gate Passed Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

@stephanegigandet stephanegigandet merged commit f691229 into main May 21, 2024
12 checks passed
@stephanegigandet stephanegigandet deleted the banner-accessibility branch May 21, 2024 10:29
john-gom pushed a commit that referenced this pull request May 24, 2024
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 CSS 🎁 donations 💥 Merge Conflicts 💥 Merge Conflicts Template::Toolkit The templating toolkit used by product opener. The starting point for HTML/JS/CSS fixes. 🧪 tests
Development

Successfully merging this pull request may close these issues.

[a11y] donation banner has two main concerns
3 participants