Skip to content

fix(a11y): announce workspace status and progress steps to screen readers #1562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
olexii4 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(a11y): announce workspace status and progress steps to screen readers #1562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e80f923
fix(a11y): announce workspace status and progress steps to screen rea…
olexii4 May 12, 2026
994ad51
fix(a11y): announce workspace condition sub-steps to screen readers
olexii4 May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .deps/EXCLUDED/dev.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ This file contains a manual contribution to .deps/dev.md and it's needed because
| `@eclipse-che/api@7.86.0` | ecd.che |
| `@eclipse-che/license-tool@2.0.0` | ecd.che |
| `axios@1.15.2` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/axios/1.15.2) |
| `jsbn@0.1.1` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/jsbn/0.1.1) |
| `postcss@8.5.13` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/postcss/8.5.13) |


112 changes: 112 additions & 0 deletions ...src/components/Workspace/Status/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@ exports[`Workspace indicator component Che Workspaces should render ERROR status
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is ERROR
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -93,6 +100,13 @@ exports[`Workspace indicator component Che Workspaces should render RUNNING stat
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is RUNNING
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -143,6 +157,13 @@ exports[`Workspace indicator component Che Workspaces should render STARTING sta
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is STARTING
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -203,6 +224,13 @@ exports[`Workspace indicator component Che Workspaces should render STOPPED stat
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is STOPPED
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -253,6 +281,13 @@ exports[`Workspace indicator component Che Workspaces should render STOPPING sta
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is STOPPING
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -302,6 +337,13 @@ exports[`Workspace indicator component Deprecated workspaces should render "Depr
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Deprecated
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -351,6 +393,13 @@ exports[`Workspace indicator component DevWorkspaces should render FAILED status
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Failed
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -401,6 +450,13 @@ exports[`Workspace indicator component DevWorkspaces should render FAILING statu
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Failing
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -450,6 +506,13 @@ exports[`Workspace indicator component DevWorkspaces should render RUNNING statu
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Running
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -510,6 +573,13 @@ exports[`Workspace indicator component DevWorkspaces should render STOPPED statu
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Stopped
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -559,6 +629,13 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Running
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -619,6 +696,13 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Stopped
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -679,6 +763,13 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Stopped
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -739,6 +830,13 @@ exports[`Workspace indicator component SCC Mismatch should render warning for ST
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is Stopped
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -805,6 +903,13 @@ exports[`Workspace indicator component SCC Mismatch should render warning triang
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status has SCC mismatch warning
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -855,6 +960,13 @@ exports[`Workspace indicator component should render default status correctly 1`
</svg>
</span>
</span>
<span
aria-atomic="true"
className="pf-v6-screen-reader"
role="status"
>
Workspace status is STOPPING
</span>
</span>
</div>
</div>
Expand Down
14 changes: 9 additions & 5 deletions packages/dashboard-frontend/src/components/Workspace/Status/Indicator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,18 +51,22 @@ const WorkspaceStatusIndicatorComponent: React.FC<Props> = ({
? 'Deprecated workspace'
: status.toLocaleUpperCase();

const statusAriaLabel = sccMismatch
? 'Workspace status has SCC mismatch warning'
: `Workspace status is ${status}`;

return (
<CheTooltip content={tooltip}>
<span
className={styles.statusIndicator}
data-testid="workspace-status-indicator"
aria-label={
sccMismatch
? 'Workspace status has SCC mismatch warning'
: `Workspace status is ${status}`
}
aria-label={statusAriaLabel}
>
{icon}
{/* Live region: announces status changes to screen readers without requiring user focus */}
<span role="status" aria-atomic="true" className="pf-v6-screen-reader">
{statusAriaLabel}
</span>
</span>
</CheTooltip>
);
Expand Down
1 change: 1 addition & 0 deletions ...ard-frontend/src/components/WorkspaceProgress/StartingSteps/WorkspaceConditions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ class StartingStepWorkspaceConditions extends ProgressStep<Props, State> {
hasChildren={hasChildren}
isError={isError}
isWarning={isWarning}
parentStepName="Waiting for workspace to start"
>
{this.name}
<PureSubCondition distance={distance} title={subConditionTitle} />
Expand Down
98 changes: 86 additions & 12 deletions ...nd/src/components/WorkspaceProgress/StepTitle/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@ exports[`ProgressStepTitle snapshot - active step 1`] = `
>
Step 1
</span>,
<span
aria-atomic="true"
aria-live="polite"
className="pf-v6-screen-reader"
role="status"
>
Step: Step 1
</span>,
]
`;

Expand All @@ -49,16 +57,34 @@ exports[`ProgressStepTitle snapshot - active step failed 1`] = `
>
Step 1
</span>,
<span
aria-atomic="true"
aria-live="polite"
className="pf-v6-screen-reader"
role="status"
>
Step: Step 1
</span>,
]
`;

exports[`ProgressStepTitle snapshot - active step has children 1`] = `
<span
className="progress"
data-testid="step-title"
>
Step 1
</span>
[
<span
className="progress"
data-testid="step-title"
>
Step 1
</span>,
<span
aria-atomic="true"
aria-live="polite"
className="pf-v6-screen-reader"
role="status"
>
Step: Step 1
</span>,
]
`;

exports[`ProgressStepTitle snapshot - active step warning 1`] = `
Expand All @@ -84,14 +110,62 @@ exports[`ProgressStepTitle snapshot - active step warning 1`] = `
>
Step 1
</span>,
<span
aria-atomic="true"
aria-live="polite"
className="pf-v6-screen-reader"
role="status"
>
Step: Step 1
</span>,
]
`;

exports[`ProgressStepTitle snapshot - already-done step 1`] = `
[
<svg
aria-hidden={true}
aria-labelledby={null}
className="pf-v6-svg successIcon stepIcon"
data-testid="step-done-icon"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
/>
</svg>,
<span
className="ready"
data-testid="step-title"
>
Step 1
</span>,
<span
aria-atomic="true"
aria-live="polite"
className="pf-v6-screen-reader"
role="status"
/>,
]
`;

exports[`ProgressStepTitle snapshot - non-active step 1`] = `
<span
className="ready"
data-testid="step-title"
>
Step 1
</span>
[
<span
className="ready"
data-testid="step-title"
>
Step 1
</span>,
<span
aria-atomic="true"
aria-live="polite"
className="pf-v6-screen-reader"
role="status"
/>,
]
`;
Loading
Loading