Skip to content

Commit 11f3186

Browse files
svorolexii4
svor
and
olexii4
authored
Backport fixes for WCAG 1.3.1 and WCAG 4.1.2 (#1566)
* fix(a11y): fix invalid list structures in navigation and alert group (WCAG 1.3.1) (#1564) WCAG 2.2 criterion 1.3.1 (Info and Relationships, Level A) requires that programmatic structure matches the visual presentation so assistive technologies can correctly expose list context and item counts. Two violations fixed: 1. Navigation sidebar (RecentList): NavGroup (renders <section>) was a direct child of NavList (renders <ul>), producing <ul><section>...</section></ul>. HTML forbids <section> as a direct child of <ul>; screen readers could not announce the correct list context or item count. Fix: remove the NavList wrapper from NavigationRecentList. NavGroup already creates its own internal <ul> for its NavItem children, so the rendered structure is now <nav><ul>...</ul><section><ul><li>...</li></ul></section></nav>, which is valid and correctly exposes the list to assistive technologies. 2. Toast alert group (AppAlertGroup): AlertGroup with isToast always rendered <ul role="list" class="pf-v6-c-alert-group pf-m-toast"> even when empty. An empty element declared as a list violates 1.3.1 because it claims a list relationship with no list items. Fix: return an empty fragment when there are no alerts, consistent with the existing guard in WorkspaceProgress/Alert. Assisted-by: Claude Sonnet 4.6 Signed-off-by: Oleksii Orel <oorel@redhat.com> * fix(a11y): add role="img" to workspace status indicator span (WCAG 4.1.2) (#1563) WCAG 2.2 criterion 4.1.2 (Name, Role, Value, Level A) requires that elements with aria-label have a valid semantic role so assistive technologies can correctly expose the value. The workspace status indicator used a generic <span> with aria-label but no role, causing screen readers to silently ignore the status text. The same span is used in the Workspaces list and the Workspace Details Overview. Adding role="img" to the span declares it as a named graphic element. Screen readers now announce e.g. "Workspace status is Running" when the element receives focus, satisfying the criterion. Assisted-by: Claude Sonnet 4.6 Signed-off-by: Oleksii Orel <oorel@redhat.com> --------- Signed-off-by: Oleksii Orel <oorel@redhat.com> Co-authored-by: Oleksii Orel <oorel@redhat.com>
1 parent f478571 commit 11f3186

4 files changed

Lines changed: 26 additions & 7 deletions

File tree

‎packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* Red Hat, Inc. - initial API and implementation
1111
*/
1212

13-
import { NavGroup, NavList } from '@patternfly/react-core';
13+
import { NavGroup } from '@patternfly/react-core';
1414
import React from 'react';
1515

1616
import { NavigationRecentItem } from '@/Layout/Navigation/RecentItem';
@@ -51,11 +51,9 @@ function NavigationRecentList(props: {
5151
);
5252
});
5353
return (
54-
<NavList>
55-
<NavGroup title="RECENT WORKSPACES" style={{ marginTop: '25px' }}>
56-
{recentWorkspaceItems}
57-
</NavGroup>
58-
</NavList>
54+
<NavGroup title="RECENT WORKSPACES" style={{ marginTop: '25px' }}>
55+
{recentWorkspaceItems}
56+
</NavGroup>
5957
);
6058
}
6159
NavigationRecentList.displayName = 'NavigationRecentListComponent';

‎packages/dashboard-frontend/src/components/AppAlertGroup/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,11 @@ class AppAlertGroup extends React.PureComponent<Props, State> {
9292
}
9393

9494
public render(): React.ReactElement {
95-
return <AlertGroup isToast>{this.state.alerts.map(alert => this.getAlert(alert))}</AlertGroup>;
95+
const { alerts } = this.state;
96+
if (alerts.length === 0) {
97+
return <></>;
98+
}
99+
return <AlertGroup isToast>{alerts.map(alert => this.getAlert(alert))}</AlertGroup>;
96100
}
97101
}
98102

‎packages/dashboard-frontend/src/components/Workspace/Status/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ exports[`Workspace indicator component Che Workspaces should render ERROR status
2121
aria-label="Workspace status is ERROR"
2222
className="statusIndicator"
2323
data-testid="workspace-status-indicator"
24+
role="img"
2425
>
2526
<span
2627
className="pf-v6-c-icon pf-m-inline"
@@ -70,6 +71,7 @@ exports[`Workspace indicator component Che Workspaces should render RUNNING stat
7071
aria-label="Workspace status is RUNNING"
7172
className="statusIndicator"
7273
data-testid="workspace-status-indicator"
74+
role="img"
7375
>
7476
<span
7577
className="pf-v6-c-icon pf-m-inline"
@@ -119,6 +121,7 @@ exports[`Workspace indicator component Che Workspaces should render STARTING sta
119121
aria-label="Workspace status is STARTING"
120122
className="statusIndicator"
121123
data-testid="workspace-status-indicator"
124+
role="img"
122125
>
123126
<span
124127
className="pf-v6-c-icon pf-m-inline"
@@ -169,6 +172,7 @@ exports[`Workspace indicator component Che Workspaces should render STOPPED stat
169172
aria-label="Workspace status is STOPPED"
170173
className="statusIndicator"
171174
data-testid="workspace-status-indicator"
175+
role="img"
172176
>
173177
<span
174178
className="pf-v6-c-icon pf-m-inline"
@@ -229,6 +233,7 @@ exports[`Workspace indicator component Che Workspaces should render STOPPING sta
229233
aria-label="Workspace status is STOPPING"
230234
className="statusIndicator"
231235
data-testid="workspace-status-indicator"
236+
role="img"
232237
>
233238
<span
234239
className="pf-v6-c-icon pf-m-inline"
@@ -279,6 +284,7 @@ exports[`Workspace indicator component Deprecated workspaces should render "Depr
279284
aria-label="Workspace status is Deprecated"
280285
className="statusIndicator"
281286
data-testid="workspace-status-indicator"
287+
role="img"
282288
>
283289
<span
284290
className="pf-v6-c-icon pf-m-inline"
@@ -328,6 +334,7 @@ exports[`Workspace indicator component DevWorkspaces should render FAILED status
328334
aria-label="Workspace status is Failed"
329335
className="statusIndicator"
330336
data-testid="workspace-status-indicator"
337+
role="img"
331338
>
332339
<span
333340
className="pf-v6-c-icon pf-m-inline"
@@ -377,6 +384,7 @@ exports[`Workspace indicator component DevWorkspaces should render FAILING statu
377384
aria-label="Workspace status is Failing"
378385
className="statusIndicator"
379386
data-testid="workspace-status-indicator"
387+
role="img"
380388
>
381389
<span
382390
className="pf-v6-c-icon pf-m-inline"
@@ -427,6 +435,7 @@ exports[`Workspace indicator component DevWorkspaces should render RUNNING statu
427435
aria-label="Workspace status is Running"
428436
className="statusIndicator"
429437
data-testid="workspace-status-indicator"
438+
role="img"
430439
>
431440
<span
432441
className="pf-v6-c-icon pf-m-inline"
@@ -476,6 +485,7 @@ exports[`Workspace indicator component DevWorkspaces should render STOPPED statu
476485
aria-label="Workspace status is Stopped"
477486
className="statusIndicator"
478487
data-testid="workspace-status-indicator"
488+
role="img"
479489
>
480490
<span
481491
className="pf-v6-c-icon pf-m-inline"
@@ -536,6 +546,7 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
536546
aria-label="Workspace status is Running"
537547
className="statusIndicator"
538548
data-testid="workspace-status-indicator"
549+
role="img"
539550
>
540551
<span
541552
className="pf-v6-c-icon pf-m-inline"
@@ -585,6 +596,7 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
585596
aria-label="Workspace status is Stopped"
586597
className="statusIndicator"
587598
data-testid="workspace-status-indicator"
599+
role="img"
588600
>
589601
<span
590602
className="pf-v6-c-icon pf-m-inline"
@@ -645,6 +657,7 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
645657
aria-label="Workspace status is Stopped"
646658
className="statusIndicator"
647659
data-testid="workspace-status-indicator"
660+
role="img"
648661
>
649662
<span
650663
className="pf-v6-c-icon pf-m-inline"
@@ -705,6 +718,7 @@ exports[`Workspace indicator component SCC Mismatch should render warning for ST
705718
aria-label="Workspace status is Stopped"
706719
className="statusIndicator"
707720
data-testid="workspace-status-indicator"
721+
role="img"
708722
>
709723
<span
710724
className="pf-v6-c-icon pf-m-inline"
@@ -782,6 +796,7 @@ exports[`Workspace indicator component SCC Mismatch should render warning triang
782796
aria-label="Workspace status has SCC mismatch warning"
783797
className="statusIndicator"
784798
data-testid="workspace-status-indicator"
799+
role="img"
785800
>
786801
<span
787802
className="pf-v6-c-icon pf-m-inline"
@@ -831,6 +846,7 @@ exports[`Workspace indicator component should render default status correctly 1`
831846
aria-label="Workspace status is STOPPING"
832847
className="statusIndicator"
833848
data-testid="workspace-status-indicator"
849+
role="img"
834850
>
835851
<span
836852
className="pf-v6-c-icon pf-m-inline"

‎packages/dashboard-frontend/src/components/Workspace/Status/Indicator/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const WorkspaceStatusIndicatorComponent: React.FC<Props> = ({
5454
return (
5555
<CheTooltip content={tooltip}>
5656
<span
57+
role="img"
5758
className={styles.statusIndicator}
5859
data-testid="workspace-status-indicator"
5960
aria-label={

0 commit comments

Comments
 (0)