Skip to content

CounterLabel: Accessibility improvements for better screen reader announcing - #2604

Merged
broccolinisoup merged 4 commits into
mainfrom
counter-label-a11y-counters
Nov 29, 2022
Merged

CounterLabel: Accessibility improvements for better screen reader announcing#2604
broccolinisoup merged 4 commits into
mainfrom
counter-label-a11y-counters

Conversation

@broccolinisoup

@broccolinisoupbroccolinisoup commented Nov 22, 2022

Copy link
Copy Markdown
Member

Closeshttps://github.com/github/primer/issues/1507

This PR brings improvement on the CounterLabel to make the counter data have an accessible name.

  • Refactored CounterLabel to abandon styled-components
  • Re-wrote unit tests with the user behavioural paradigm approach rather than checking styled-components specific implementation details
  • Add aria-hidden=true to the existing span (visual representation of the counter)
  • Add visually hidden span with extra spacing and parenthesis for screen readers to announce the counter more accessible.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@broccolinisoup
broccolinisoup requested review from a team and josepmartinsNovember 22, 2022 06:18
@changeset-bot

changeset-botBot commented Nov 22, 2022

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d6259ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actionsBot commented Nov 22, 2022

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js78.95 KB (+0.04% 🔺)
dist/browser.umd.js79.58 KB (+0.04% 🔺)

@broccolinisoup
broccolinisoupforce-pushed the counter-label-a11y-counters branch from 50d3298 to 7f010f6CompareNovember 22, 2022 06:24
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2604 November 22, 2022 06:26 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages November 22, 2022 06:31 Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2604 November 22, 2022 06:31 Inactive
@broccolinisoup
broccolinisoup marked this pull request as draft November 22, 2022 06:42
@broccolinisoup
broccolinisoup temporarily deployed to github-pages November 22, 2022 06:59 Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2604 November 22, 2022 06:59 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages November 22, 2022 07:18 Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2604 November 22, 2022 07:18 Inactive
@broccolinisoup
broccolinisoup marked this pull request as ready for review November 22, 2022 08:45
@broccolinisoup
broccolinisoupforce-pushed the counter-label-a11y-counters branch from 1d16e36 to a38e0afCompareNovember 24, 2022 03:32
@broccolinisoup
broccolinisoup temporarily deployed to github-pages November 24, 2022 03:39 Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2604 November 24, 2022 03:39 Inactive

@josepmartinsjosepmartins left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚀

@josepmartins
josepmartins temporarily deployed to github-pages November 29, 2022 10:19 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-2604 November 29, 2022 10:20 Inactive
@broccolinisoup
broccolinisoup merged commit 7e9e367 into mainNov 29, 2022
@broccolinisoup
broccolinisoup deleted the counter-label-a11y-counters branch November 29, 2022 23:18
@primer-cssprimer-css mentioned this pull request Nov 29, 2022
Sign up for freeto 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

@broccolinisoup@josepmartins