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

Update loader component to use role=progressbar #53

Closed
schne324 opened this issue Apr 16, 2020 · 1 comment · Fixed by #289
Closed

Update loader component to use role=progressbar #53

schne324 opened this issue Apr 16, 2020 · 1 comment · Fixed by #289
Assignees

Comments

@schne324
Copy link
Member

In anticipation of ARIA 1.2, which disallows using aria-label on roleless <div /> elements, we should probably update the <Loader /> component to use a proper role.

Using the progress bar spec as a guideline, we should:

  • add role=progressbar to the div generated by the loader component
  • follow this specific guideline:

    The author SHOULD supply values for aria-valuenow, aria-valuemin, and aria-valuemax, unless the value is indeterminate, in which case the author SHOULD omit the aria-valuenow attribute. Authors SHOULD update these values when the visual progress indicator is updated. If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.

  • test this out with VO, NVDA, and JAWS to ensure it works as expected
@schne324 schne324 transferred this issue from dequelabs/cauldron-react Jul 30, 2020
@schne324
Copy link
Member Author

schne324 commented Sep 11, 2020

maybe we could pull in https://hang-tight.netlify.app 😎 ♻️

@schne324 schne324 self-assigned this Jul 20, 2021
schne324 added a commit that referenced this issue Jul 20, 2021
BREAKING CHANGE: Loader component now set role, aria-valuetext, aria-busy, aria-valuemin, and aria-valuemax instead of making a generic role (div) have an aria-label

closes #53
schne324 added a commit that referenced this issue Jul 26, 2021
BREAKING CHANGE: Loader component now set role, aria-valuetext, aria-busy, aria-valuemin, and aria-valuemax instead of making a generic role (div) have an aria-label

closes #53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant