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

USWDS-Site - Bug: Token Class Touch Target Accessibility Failure #2796

Open
2 tasks done
RachelCorsino opened this issue Aug 28, 2024 · 0 comments
Open
2 tasks done
Labels
Affects: Accessibility 🟡 Relates to the accessibility of our components Type: Bug A problem in the code

Comments

@RachelCorsino
Copy link
Contributor

RachelCorsino commented Aug 28, 2024

Describe the bug

The touch target using token class is resulting in an accessibility failure due to insufficient spacing between elements on the Font Size and Family Palettes section. The vertical space between touch targets under the "Palette Contents" column needs to be at least 24px.
Screenshot 2024-08-29 at 1 04 40 PM

Expected Behavior

The "Palette Contents" column containing the list of family touch targets needs to have sufficient spacing vertically between elements to meet WCAG accessibility requirements.

Screenshots

token code is located in uswds-site/css/_uswds-theme-custom-styles.scss, however this may be more than just a class update as other touch targets that use the token class are not being flagged as failures, just the ones listed out vertically.

Screenshot 2024-08-27 at 9 15 28 PM

Code of Conduct

@RachelCorsino RachelCorsino added the Type: Bug A problem in the code label Aug 28, 2024
@github-actions github-actions bot added the Status: Triage We're triaging this issue and grooming if necessary label Aug 28, 2024
@brunerae brunerae added Affects: Accessibility 🟡 Relates to the accessibility of our components and removed Status: Triage We're triaging this issue and grooming if necessary labels Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Affects: Accessibility 🟡 Relates to the accessibility of our components Type: Bug A problem in the code
Projects
Status: Needs refinement
Development

No branches or pull requests

2 participants