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] nav buttons ahould always have aria-label attributes #2639

Closed
seevee opened this issue Oct 24, 2023 · 0 comments · Fixed by #2640
Closed

[fix] nav buttons ahould always have aria-label attributes #2639

seevee opened this issue Oct 24, 2023 · 0 comments · Fixed by #2640
Labels
type: bug Something isn't working like it's supposed to

Comments

@seevee
Copy link
Contributor

seevee commented Oct 24, 2023

ReactUSWDS Version & USWDS Version:

  • ReactUSWDS: 5.5.0
  • USWDS: 3.6.0

Describe the bug

WCAG § 4.1.2 states the following:

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

The NavCloseButton element, while it accepts an aria-label itself, by default only applies an aria-label to the enclosed Icon.Close rather than the <button /> element. This means that using any further abstracted components (like ExtendedNav) will cause the resulting HTML to violate this rule.

The buttons within the modal elements already conform to this paradigm, only the nav elements appear to be effected.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the project storybook
  2. Click on Components -> Header
  3. Inspect any *Button element
  4. Observe that aria-label is not present on button elements, but is present on child <svg /> elements

Expected behavior

<button /> elements should have aria-label attribute to meet WCAG § 4.1.2 requirements.

Additional context

This issue was initially identified using HTML_Codesniffer which we use alongside Axe and playwright to implement E2E testing.

@seevee seevee added the type: bug Something isn't working like it's supposed to label Oct 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working like it's supposed to
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant