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

Improve a11y for template counter component #1150

Merged
merged 2 commits into from
Apr 20, 2021

Conversation

geoffrich
Copy link
Member

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts

This PR includes the following a11y improvements for the default template:

  • The Counter component renders the next number out-of-view so it can slide the next number in. This number was still visible to assistive tech such as screen readers, which read out both numbers as if they were one. For example, NVDA read out "10" in the starting state, when only "0" was visible on screen. Adding the aria-hidden attribute to the next number hides it from screen readers so they only read out the visible number.
  • I also added aria-hidden to the SVGs in the + and - buttons. The aria-label on the buttons overrides the label on the SVGs, and they don't need to be read out to screen readers.

@vercel
Copy link

vercel bot commented Apr 20, 2021

@geoffrich is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

@Rich-Harris Rich-Harris merged commit 872d734 into sveltejs:master Apr 20, 2021
@Rich-Harris
Copy link
Member

thank you so much!

@geoffrich geoffrich deleted the counter-a11y branch April 20, 2021 22:39
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 this pull request may close these issues.

2 participants