docs(progress-bar): documentation updates #5553

cdransf · 2025-06-18T22:29:13Z

Description

Improving the accessibility documentation of components.

Related issue(s)

SWC-398

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

changeset-bot · 2025-06-18T22:29:17Z

🦋 Changeset detected

Latest commit: a4f9388

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

This PR includes changesets to release 84 packages

Name	Type
@spectrum-web-components/progress-bar	Patch
@spectrum-web-components/bundle	Patch
documentation	Patch
@spectrum-web-components/eslint-plugin	Patch
@spectrum-web-components/accordion	Patch
@spectrum-web-components/action-bar	Patch
@spectrum-web-components/action-button	Patch
@spectrum-web-components/action-group	Patch
@spectrum-web-components/action-menu	Patch
@spectrum-web-components/alert-banner	Patch
@spectrum-web-components/alert-dialog	Patch
@spectrum-web-components/asset	Patch
@spectrum-web-components/avatar	Patch
@spectrum-web-components/badge	Patch
@spectrum-web-components/breadcrumbs	Patch
@spectrum-web-components/button-group	Patch
@spectrum-web-components/button	Patch
@spectrum-web-components/card	Patch
@spectrum-web-components/checkbox	Patch
@spectrum-web-components/clear-button	Patch
@spectrum-web-components/close-button	Patch
@spectrum-web-components/coachmark	Patch
@spectrum-web-components/color-area	Patch
@spectrum-web-components/color-field	Patch
@spectrum-web-components/color-handle	Patch
@spectrum-web-components/color-loupe	Patch
@spectrum-web-components/color-slider	Patch
@spectrum-web-components/color-wheel	Patch
@spectrum-web-components/combobox	Patch
@spectrum-web-components/contextual-help	Patch
@spectrum-web-components/dialog	Patch
@spectrum-web-components/divider	Patch
@spectrum-web-components/dropzone	Patch
@spectrum-web-components/field-group	Patch
@spectrum-web-components/field-label	Patch
@spectrum-web-components/help-text	Patch
@spectrum-web-components/icon	Patch
@spectrum-web-components/icons-ui	Patch
@spectrum-web-components/icons-workflow	Patch
@spectrum-web-components/icons	Patch
@spectrum-web-components/iconset	Patch
@spectrum-web-components/illustrated-message	Patch
@spectrum-web-components/infield-button	Patch
@spectrum-web-components/link	Patch
@spectrum-web-components/menu	Patch
@spectrum-web-components/meter	Patch
@spectrum-web-components/modal	Patch
@spectrum-web-components/number-field	Patch
@spectrum-web-components/overlay	Patch
@spectrum-web-components/picker-button	Patch
@spectrum-web-components/picker	Patch
@spectrum-web-components/popover	Patch
@spectrum-web-components/progress-circle	Patch
@spectrum-web-components/radio	Patch
@spectrum-web-components/search	Patch
@spectrum-web-components/sidenav	Patch
@spectrum-web-components/slider	Patch
@spectrum-web-components/split-view	Patch
@spectrum-web-components/status-light	Patch
@spectrum-web-components/swatch	Patch
@spectrum-web-components/switch	Patch
@spectrum-web-components/table	Patch
@spectrum-web-components/tabs	Patch
@spectrum-web-components/tags	Patch
@spectrum-web-components/textfield	Patch
@spectrum-web-components/thumbnail	Patch
@spectrum-web-components/toast	Patch
@spectrum-web-components/tooltip	Patch
@spectrum-web-components/top-nav	Patch
@spectrum-web-components/tray	Patch
@spectrum-web-components/underlay	Patch
@spectrum-web-components/custom-vars-viewer	Patch
@spectrum-web-components/story-decorator	Patch
@spectrum-web-components/vrt-compare	Patch
@spectrum-web-components/base	Patch
@spectrum-web-components/grid	Patch
@spectrum-web-components/opacity-checkerboard	Patch
@spectrum-web-components/reactive-controllers	Patch
@spectrum-web-components/shared	Patch
@spectrum-web-components/styles	Patch
@spectrum-web-components/theme	Patch
@spectrum-web-components/truncated	Patch
example-project-rollup	Patch
example-project-webpack	Patch

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 · 2025-06-18T22:34:20Z

Tachometer results

Chrome

progress-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	454 kB	29.44ms - 30.24ms	-	faster ✔ 3% - 6% 0.77ms - 1.93ms
branch	432 kB	30.77ms - 31.61ms	slower ❌ 3% - 6% 0.77ms - 1.93ms	-

Firefox

progress-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	454 kB	59.85ms - 61.67ms	-	faster ✔ 1% - 8% 0.74ms - 5.34ms
branch	432 kB	61.68ms - 65.92ms	slower ❌ 1% - 9% 0.74ms - 5.34ms	-

packages/progress-bar/README.md

packages/progress-bar/src/ProgressBar.ts

Rajdeepc

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ".
I have pushed this commit for you to verify.

cdransf · 2025-06-24T02:06:47Z

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158

Are all of the CSS changes expected in the diff as well?

packages/progress-bar/package.json

Rajdeepc · 2025-06-24T06:22:45Z

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158

Are all of the CSS changes expected in the diff as well?

Mostly all are linting whitespace. Only change is

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158

Are all of the CSS changes expected in the diff as well?

@cdransf Yes we need to add the changes from this commit to maintain parity of UI on the deprecation notice. Let's not create another format here!

cdransf · 2025-06-24T13:42:15Z

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158
Are all of the CSS changes expected in the diff as well?

Mostly all are linting whitespace. Only change is

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158
Are all of the CSS changes expected in the diff as well?

@cdransf Yes we need to add the changes from this commit to maintain parity of UI on the deprecation notice. Let's not create another format here!

Got it! I rebased main back in to resolve the conflicts when you have the time to take another look. ✨

Rajdeepc · 2025-06-24T14:44:12Z

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158
Are all of the CSS changes expected in the diff as well?

Mostly all are linting whitespace. Only change is

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158
Are all of the CSS changes expected in the diff as well?

@cdransf Yes we need to add the changes from this commit to maintain parity of UI on the deprecation notice. Let's not create another format here!

Got it! I rebased main back in to resolve the conflicts when you have the time to take another look. ✨

Can you add back inline-alert.css changes too. I think it is missing.

cdransf · 2025-06-24T18:41:07Z

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158
Are all of the CSS changes expected in the diff as well?

Mostly all are linting whitespace. Only change is

We already have a system in place to show deprecation notice like below. In package.json you can add deprecationNotice: " < your notice here> ". I have pushed this commit for you to verify.

Excellent, thank you! Do we need to address this? 03c57d2#r2161351158
Are all of the CSS changes expected in the diff as well?

@cdransf Yes we need to add the changes from this commit to maintain parity of UI on the deprecation notice. Let's not create another format here!

Got it! I rebased main back in to resolve the conflicts when you have the time to take another look. ✨

Can you add back inline-alert.css changes too. I think it is missing.

Just restored those. ✨

github-actions · 2025-06-25T11:48:17Z

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5553

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

packages/progress-bar/README.md

nikkimk

A few changes to some headings and wording but overall a welcome improvement to our docs.

projects/documentation/src/components/inline-alert.css

packages/progress-bar/test/progress-bar.test.ts

packages/progress-bar/src/ProgressBar.ts

packages/progress-bar/README.md

packages/progress-bar/package.json

Rajdeepc

Looks good to me! Please re-run the pipeline to clear out the VRT noise. If everything passes, this should be good to merge.

nikkimk

Lost gold treasure map (LGTM)

…cation warning

Co-authored-by: Rajdeep Chandra <rajrock38@gmail.com>

cdransf self-assigned this Jun 18, 2025

cdransf added the WIP label Jun 18, 2025

cdransf marked this pull request as ready for review June 19, 2025 18:20

cdransf requested a review from a team as a code owner June 19, 2025 18:20

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from b03e21f to d3066d2 Compare June 19, 2025 18:21

cdransf added Documentation and removed WIP labels Jun 19, 2025

cdransf requested review from nikkimk and caseyisonit June 19, 2025 18:21

castastrophe approved these changes Jun 19, 2025

View reviewed changes

packages/progress-bar/README.md Outdated Show resolved Hide resolved

packages/progress-bar/src/ProgressBar.ts Outdated Show resolved Hide resolved

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from 80b25dc to 67bd793 Compare June 19, 2025 23:39

Rajdeepc requested changes Jun 20, 2025

View reviewed changes

packages/progress-bar/src/ProgressBar.ts Outdated Show resolved Hide resolved

cdransf requested a review from Rajdeepc June 20, 2025 14:04

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from 6aab6d6 to cf28e9b Compare June 20, 2025 15:34

Rajdeepc requested changes Jun 23, 2025

View reviewed changes

cdransf force-pushed the cdransf/progress-bar-docs-audit branch 2 times, most recently from 4a7e837 to 02018da Compare June 24, 2025 03:07

github-actions bot reviewed Jun 24, 2025

View reviewed changes

packages/progress-bar/package.json Show resolved Hide resolved

cdransf force-pushed the cdransf/progress-bar-docs-audit branch 3 times, most recently from 03c57d2 to b17b435 Compare June 24, 2025 13:41

cdransf requested a review from Rajdeepc June 24, 2025 13:42

nikkimk reviewed Jul 9, 2025

View reviewed changes

packages/progress-bar/README.md Show resolved Hide resolved

nikkimk reviewed Jul 9, 2025

View reviewed changes

packages/progress-bar/README.md Outdated Show resolved Hide resolved

nikkimk reviewed Jul 9, 2025

View reviewed changes

packages/progress-bar/README.md Show resolved Hide resolved

nikkimk requested changes Jul 9, 2025

View reviewed changes

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from ef5cb05 to cbef3bc Compare July 9, 2025 15:33

cdransf requested a review from nikkimk July 9, 2025 15:36

cdransf added ready-for-review ready-for-merge Will auto-update until merged labels Jul 9, 2025

Rajdeepc approved these changes Jul 10, 2025

View reviewed changes

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from cbef3bc to d5ed278 Compare July 10, 2025 15:42

nikkimk approved these changes Jul 10, 2025

View reviewed changes

adobe deleted a comment from github-actions bot Jul 10, 2025

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from d5ed278 to b22d679 Compare July 10, 2025 17:28

cdransf enabled auto-merge (squash) July 10, 2025 17:32

cdransf force-pushed the cdransf/progress-bar-docs-audit branch 2 times, most recently from e9d1468 to 09e1e20 Compare July 10, 2025 17:40

cdransf disabled auto-merge July 10, 2025 18:22

cdransf and others added 11 commits July 11, 2025 09:50

chore: resolve conflict

9e6c844

docs(progress-bar): move variants into tabs

a21b1b2

docs(progress-bar): replace over-background w/static white; add depre…

56c2f2f

…cation warning

chore(progress-bar): add deprecation warning for over-background

a3d5370

Update packages/progress-bar/src/ProgressBar.ts

c546972

Co-authored-by: Rajdeep Chandra <rajrock38@gmail.com>

chore: resolve conflict

f8175b7

chore: updated inline alert notice styles

98b4d04

chore: restore inline-alert style changes

9e01412

chore(progress-bar): deprecation warning test

760e3ad

fix(progress-bar): deprecation warning + pass test

8c2e3b1

fix: address pr feedback

a4f9388

cdransf force-pushed the cdransf/progress-bar-docs-audit branch from 09e1e20 to a4f9388 Compare July 11, 2025 16:50

cdransf added the blocked label Jul 11, 2025

docs(progress-bar): documentation updates #5553

Are you sure you want to change the base?

docs(progress-bar): documentation updates #5553

Uh oh!

Conversation

cdransf commented Jun 18, 2025

Description

Related issue(s)

Author's checklist

Reviewer's checklist

Device review

Uh oh!

changeset-bot bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tachometer results

progress-bar permalink

basic-test

progress-bar permalink

basic-test

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Rajdeepc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cdransf commented Jun 24, 2025

Uh oh!

Uh oh!

Rajdeepc commented Jun 24, 2025

Uh oh!

cdransf commented Jun 24, 2025

Uh oh!

Rajdeepc commented Jun 24, 2025

Uh oh!

cdransf commented Jun 24, 2025

Uh oh!

github-actions bot commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nikkimk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

nikkimk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

changeset-bot bot commented Jun 18, 2025 •

edited

Loading

github-actions bot commented Jun 18, 2025 •

edited

Loading

Rajdeepc left a comment •

edited

Loading

github-actions bot commented Jun 25, 2025 •

edited

Loading