ProgressBar: Adjust `ProgressBar.Item` for accessibility by TylerJDev · Pull Request #4878 · primer/react

TylerJDev · 2024-08-23T20:45:38Z

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

Changelog

New

Changed

Moves aria-* attributes to ProgressBar.Item
Marks ProgressBar.Item as role="progressbar"

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-08-23T20:45:41Z

🦋 Changeset detected

Latest commit: 8b67e67

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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 · 2024-08-23T20:49:33Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.26 KB (+0.02% 🔺)
packages/react/dist/browser.umd.js	97.57 KB (+0.07% 🔺)

TylerJDev · 2024-08-26T14:58:34Z

+ const ariaAttributes = {
+ 'aria-valuenow': progressAsNumber && progressAsNumber >= 0 ? Math.round(progressAsNumber) : undefined,
+ 'aria-valuemin': 0,
+ 'aria-valuemax': 100,
 }

 warning(
-children &&
+!ariaAttributes['aria-valuenow'] &&
 typeof (rest as React.AriaAttributes)['aria-valuenow'] === 'undefined' &&
 typeof (rest as React.AriaAttributes)['aria-valuetext'] === 'undefined',
 'Expected `aria-valuenow` or `aria-valuetext` to be provided to <ProgressBar>. Provide one of these values so screen reader users can determine the current progress. This warning will become an error in the next major release.',
 )


I'm curious if there's a reason why we didn't include ariaAttributes['aria-valuenow'] as a value to include in the warning conditional? Since we automatically create the aria-valuenow based on progressAsNumber being true and a number, is that sufficient enough if consumers don't provide an aria-valuenow themselves? Also, I added progressAsNumber >= 0 so we can include aria-valuenow values that start at 0.
Cc: @kendallgassner - would love your insight, but I realize that it's been a minute since we've introduced these changes 😅

huh, your right that is odd and if a user passed it in it would override the value, we are setting via ...rest. 🤔 I think it's safe to remove the warning all together.

primer-integration · 2024-10-18T16:43:33Z

🟢 golden-jobs completed with status success.

Co-authored-by: Josh Black <joshblack@github.com>

joshblack

Looks great! Just left a small suggestion in case it was helpful 👍

Co-authored-by: Josh Black <joshblack@github.com>

TylerJDev · 2024-10-30T16:11:09Z

Gonna wait on https://github.com/github/github/pull/344354 before I merge this PR in so we don't get failing tests 😁

primer-integration · 2024-11-02T16:19:04Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/349794

Adjust ProgressBar.Item for accessibility
16795e3

TylerJDev temporarily deployed to github-pages August 23, 2024 20:49 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 August 23, 2024 20:50 Inactive

Move warning
747354d

TylerJDev temporarily deployed to github-pages August 26, 2024 14:11 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 August 26, 2024 14:12 Inactive

Include if progressAsNumber === 0
b2aa4c3

TylerJDev commented Aug 26, 2024
View reviewed changes

TylerJDev temporarily deployed to github-pages August 26, 2024 15:02 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 August 26, 2024 15:03 Inactive

Update snapshots, tests, move aria-* attributes
3cbd244

TylerJDev temporarily deployed to github-pages August 26, 2024 16:08 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 August 26, 2024 16:09 Inactive

TylerJDev added 2 commits August 29, 2024 10:14

Update warning
993204c

Merge branch 'main' into tylerjdev/progress-bar-a11y
6bb59e3

TylerJDev temporarily deployed to github-pages August 29, 2024 14:24 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 August 29, 2024 14:24 Inactive

Update ProgressBar.Item props
d73c566

TylerJDev temporarily deployed to github-pages August 30, 2024 20:46 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 August 30, 2024 20:47 Inactive

Merge branch 'main' into tylerjdev/progress-bar-a11y
344cf29

TylerJDev temporarily deployed to github-pages September 24, 2024 18:10 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 September 24, 2024 18:10 Inactive

Account for 0
0ca44f2

TylerJDev temporarily deployed to github-pages September 25, 2024 13:33 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 September 25, 2024 13:34 Inactive

Add changeset
c07904e

TylerJDev temporarily deployed to github-pages September 27, 2024 13:57 — with GitHub Actions Inactive

TylerJDev temporarily deployed to github-pages October 18, 2024 16:20 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 October 18, 2024 16:21 Inactive

Change children conditional
b6afe92

TylerJDev temporarily deployed to github-pages October 22, 2024 14:21 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 October 22, 2024 14:22 Inactive

Remove warning, add default 0
b153fc9

TylerJDev temporarily deployed to github-pages October 22, 2024 15:20 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 October 22, 2024 15:20 Inactive

Fix lint, test
3a0f019

TylerJDev temporarily deployed to github-pages October 24, 2024 14:10 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 October 24, 2024 14:11 Inactive

joshblack reviewed Oct 24, 2024
View reviewed changes

Comment threadpackages/react/src/ProgressBar/ProgressBar.tsx
Comment threadpackages/react/src/ProgressBar/ProgressBar.tsx Outdated
Comment threadpackages/react/src/ProgressBar/ProgressBar.tsx Outdated
Comment threadpackages/react/src/ProgressBar/ProgressBar.tsx

TylerJDevand others added 2 commits October 24, 2024 11:08

Update packages/react/src/ProgressBar/ProgressBar.tsx
4823c8e
Co-authored-by: Josh Black <joshblack@github.com>

Update packages/react/src/ProgressBar/ProgressBar.tsx
a2ca83b
Co-authored-by: Josh Black <joshblack@github.com>

TylerJDev temporarily deployed to github-pages October 24, 2024 15:10 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4878 October 24, 2024 15:11 Inactive

TylerJDev requested a review from joshblack October 30, 2024 13:21

joshblack approved these changes Oct 30, 2024
View reviewed changes

Update packages/react/src/ProgressBar/ProgressBar.tsx
8b67e67
Co-authored-by: Josh Black <joshblack@github.com>

TylerJDev deployed to github-pages October 30, 2024 16:12 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-4878 October 30, 2024 16:12 Inactive

TylerJDev added this pull request to the merge queue Nov 2, 2024

Merged via the queue into main with commit 73312d8Nov 2, 2024

TylerJDev deleted the tylerjdev/progress-bar-a11y branch November 2, 2024 17:02

primerBot mentioned this pull request Nov 2, 2024
Release tracking (37.1.0) #5166
Merged

rwe mentioned this pull request Jul 5, 2025
ProgressBar.Item overrides aria-valuemin/aria-valuemax#6286
Closed

Navigation Menu

Uh oh!

ProgressBar: Adjust `ProgressBar.Item` for accessibility - #4878

ProgressBar: Adjust `ProgressBar.Item` for accessibility#4878
TylerJDev merged 17 commits into
mainfrom
tylerjdev/progress-bar-a11y

TylerJDev commented Aug 23, 2024•
edited
Loading

Uh oh!

changeset-botBot commented Aug 23, 2024•
edited
Loading

Uh oh!

github-actionsBot commented Aug 23, 2024•
edited
Loading

Uh oh!

TylerJDevAug 26, 2024

Uh oh!

kendallgassnerAug 28, 2024

Uh oh!

primer-integrationBot commented Oct 18, 2024•
edited
Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joshblack left a comment

Uh oh!

TylerJDev commented Oct 30, 2024

Uh oh!

primer-integrationBot commented Nov 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

TylerJDev commented Aug 23, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented Aug 23, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Aug 23, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

TylerJDevAug 26, 2024

Choose a reason for hiding this comment

Uh oh!

kendallgassnerAug 28, 2024

Choose a reason for hiding this comment

Uh oh!

primer-integrationBot commented Oct 18, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

TylerJDev commented Oct 30, 2024

Uh oh!

primer-integrationBot commented Nov 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

TylerJDev commented Aug 23, 2024•
edited
Loading

changeset-botBot commented Aug 23, 2024•
edited
Loading

github-actionsBot commented Aug 23, 2024•
edited
Loading

primer-integrationBot commented Oct 18, 2024•
edited
Loading