Skip to content

USWDS - Bug: Fix invalid aria role in validator list items #4905

@mejiaj

Description

@mejiaj

Describe the bug

Testing validator updates in #4719 results in the following a11y errors:

Errors in http://localhost:4000/components/validation/:

 • Elements must only use allowed ARIA attributes
   (https://dequeuniversity.com/rules/axe/3.5/aria-allowed-attr?application=axeAPI)

   (#validate-code > li:nth-child(1))

   <li class="usa-checklist__item" data-validator="uppercase"
   aria-checked="false"> Use at least one u...</li>

 • Elements must only use allowed ARIA attributes
   (https://dequeuniversity.com/rules/axe/3.5/aria-allowed-attr?application=axeAPI)

   (#validate-code > li:nth-child(2))

   <li class="usa-checklist__item" data-validator="numerical"
   aria-checked="false"> Use at least one n...</li>

Steps to reproduce the bug

  1. Use branch for USWDS - Validation: Adds complete/incomplete labels for screen readers. Resolves #4477 #4719
  2. Build site
  3. Create federalist preview with draft PR
  4. View failed CircleCI tests
  5. Click details link
  6. See errors
    image

Expected Behavior

A11Y tests should pass

Related code

Work was done in USWDS PR #4719.

Screenshots

No response

System setup

  • USWDS v3.1.0

Additional context

We should look into adding the necessary role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#associated_roles

Or change the markup so it the validation state is accurate without aria-checked

After adding aria-role="checkbox"

image

Code of Conduct

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions