Skip to content

Site Overview: Add accessible name to unlaunched site setup progress ring - #113338

Merged
p-jackson merged 4 commits into
trunkfrom
DOTMSD-1475-setup-progress-aria-label
Aug 6, 2026
Merged

Site Overview: Add accessible name to unlaunched site setup progress ring#113338
p-jackson merged 4 commits into
trunkfrom
DOTMSD-1475-setup-progress-aria-label

Conversation

@p-jackson

Copy link
Copy Markdown
Member

Fixes DOTMSD-1475

Proposed Changes

  • Add an ariaLabel prop to the shared CircularProgressBar component and wire the role="progressbar" element with aria-valuemin/aria-valuemax/aria-valuenow/aria-label.
  • Pass ariaLabel="Steps to launch your site" from the Site Overview OverviewCard unlaunched-site setup progress ring.

Why are these changes being made?

The 1/4 visibility progress ring on Site Overview announced nothing to assistive tech — axe flagged aria-progressbar-name. The role="progressbar" element had no accessible name and no value semantics, so screen readers couldn't convey what it represented or how far along it was. This gives it a name and exposes its min/max/current values.

Testing Instructions

  • Open Site Overview for an unlaunched site.
  • Inspect the setup progress ring (.circular__progress-bar) and confirm it now has aria-label="Steps to launch your site" plus aria-valuemin/aria-valuemax/aria-valuenow.
  • Run axe (or a screen reader) and confirm the aria-progressbar-name violation is gone and the ring announces its label and progress.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • For UI changes, have you tested the affected components in dark mode?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@p-jackson p-jackson self-assigned this Aug 6, 2026
@p-jackson
p-jackson marked this pull request as ready for review August 6, 2026 09:25
@p-jackson
p-jackson requested a review from a team as a code owner August 6, 2026 09:25
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 6, 2026
Comment thread client/dashboard/components/overview-card/index.tsx Outdated
@p-jackson
p-jackson merged commit 0a5d28a into trunk Aug 6, 2026
11 checks passed
@p-jackson
p-jackson deleted the DOTMSD-1475-setup-progress-aria-label branch August 6, 2026 23:39
@github-actions github-actions Bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 6, 2026
@a8ci18n

a8ci18n commented Aug 7, 2026

Copy link
Copy Markdown

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/34678102

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Hi @p-jackson, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include this string: %1$d of %2$d steps complete

Thank you in advance!

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.

3 participants