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

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

Closes https://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

packages/react/src/ProgressBar/ProgressBar.tsx

+    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.

packages/react/src/ProgressBar/ProgressBar.tsx

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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 18, 2024

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

github-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily deployed to storybook-preview-4878 October 24, 2024 14:11 Inactive

joshblack reviewed Oct 24, 2024

View reviewed changes

TylerJDev and 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-actions bot temporarily 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-actions bot deployed to storybook-preview-4878 October 30, 2024 16:12 View deployment

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

Merged via the queue into main with commit 73312d8 Nov 2, 2024
43 checks passed

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

primer bot mentioned this pull request Nov 2, 2024

Release tracking (37.1.0) #5166

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

TylerJDev commented Aug 23, 2024 •

edited

Loading

changeset-bot bot commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 23, 2024 •

edited

Loading

TylerJDev Aug 26, 2024

kendallgassner Aug 28, 2024

primer-integration bot commented Oct 18, 2024 •

edited

Loading

joshblack left a comment

TylerJDev commented Oct 30, 2024

primer-integration bot commented Nov 2, 2024

ProgressBar: Adjust ProgressBar.Item for accessibility #4878

ProgressBar: Adjust ProgressBar.Item for accessibility #4878

Conversation

TylerJDev commented Aug 23, 2024 • edited Loading

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Aug 23, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 23, 2024 • edited Loading

size-limit report 📦

TylerJDev Aug 26, 2024

Choose a reason for hiding this comment

kendallgassner Aug 28, 2024

Choose a reason for hiding this comment

primer-integration bot commented Oct 18, 2024 • edited Loading

joshblack left a comment

Choose a reason for hiding this comment

TylerJDev commented Oct 30, 2024

primer-integration bot commented Nov 2, 2024

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

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

TylerJDev commented Aug 23, 2024 •

edited

Loading

changeset-bot bot commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 23, 2024 •

edited

Loading

primer-integration bot commented Oct 18, 2024 •

edited

Loading