From 6d700d713728590a9f3e854a7bf48a545e408e90 Mon Sep 17 00:00:00 2001
From: Oleksii Orel <oorel@redhat.com>
Date: Wed, 13 May 2026 22:53:03 +0300
Subject: [PATCH 1/2] 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>
---
 .../src/Layout/Navigation/RecentList.tsx               | 10 ++++------
 .../src/components/AppAlertGroup/index.tsx             |  6 +++++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx
index 3715e09d6c..04d119f39b 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx
@@ -10,7 +10,7 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import { NavGroup, NavList } from '@patternfly/react-core';
+import { NavGroup } from '@patternfly/react-core';
 import React from 'react';
 
 import { NavigationRecentItem } from '@/Layout/Navigation/RecentItem';
@@ -51,11 +51,9 @@ function NavigationRecentList(props: {
     );
   });
   return (
-    <NavList>
-      <NavGroup title="RECENT WORKSPACES" style={{ marginTop: '25px' }}>
-        {recentWorkspaceItems}
-      </NavGroup>
-    </NavList>
+    <NavGroup title="RECENT WORKSPACES" style={{ marginTop: '25px' }}>
+      {recentWorkspaceItems}
+    </NavGroup>
   );
 }
 NavigationRecentList.displayName = 'NavigationRecentListComponent';
diff --git a/packages/dashboard-frontend/src/components/AppAlertGroup/index.tsx b/packages/dashboard-frontend/src/components/AppAlertGroup/index.tsx
index d2aacbdaf7..4ec27940c3 100644
--- a/packages/dashboard-frontend/src/components/AppAlertGroup/index.tsx
+++ b/packages/dashboard-frontend/src/components/AppAlertGroup/index.tsx
@@ -92,7 +92,11 @@ class AppAlertGroup extends React.PureComponent<Props, State> {
   }
 
   public render(): React.ReactElement {
-    return <AlertGroup isToast>{this.state.alerts.map(alert => this.getAlert(alert))}</AlertGroup>;
+    const { alerts } = this.state;
+    if (alerts.length === 0) {
+      return <></>;
+    }
+    return <AlertGroup isToast>{alerts.map(alert => this.getAlert(alert))}</AlertGroup>;
   }
 }
 

From 8977a273884c4784c7b3be3199b92c7a48dcb137 Mon Sep 17 00:00:00 2001
From: Oleksii Orel <oorel@redhat.com>
Date: Thu, 14 May 2026 12:21:15 +0300
Subject: [PATCH 2/2] 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>
---
 .../__snapshots__/Indicator.spec.tsx.snap        | 16 ++++++++++++++++
 .../Workspace/Status/Indicator/index.tsx         |  1 +
 2 files changed, 17 insertions(+)

diff --git a/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap b/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
index c5d1d412bf..9e0be00fcb 100644
--- a/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
@@ -21,6 +21,7 @@ exports[`Workspace indicator component Che Workspaces should render ERROR status
       aria-label="Workspace status is ERROR"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -70,6 +71,7 @@ exports[`Workspace indicator component Che Workspaces should render RUNNING stat
       aria-label="Workspace status is RUNNING"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -119,6 +121,7 @@ exports[`Workspace indicator component Che Workspaces should render STARTING sta
       aria-label="Workspace status is STARTING"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -169,6 +172,7 @@ exports[`Workspace indicator component Che Workspaces should render STOPPED stat
       aria-label="Workspace status is STOPPED"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -229,6 +233,7 @@ exports[`Workspace indicator component Che Workspaces should render STOPPING sta
       aria-label="Workspace status is STOPPING"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -279,6 +284,7 @@ exports[`Workspace indicator component Deprecated workspaces should render "Depr
       aria-label="Workspace status is Deprecated"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -328,6 +334,7 @@ exports[`Workspace indicator component DevWorkspaces should render FAILED status
       aria-label="Workspace status is Failed"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -377,6 +384,7 @@ exports[`Workspace indicator component DevWorkspaces should render FAILING statu
       aria-label="Workspace status is Failing"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -427,6 +435,7 @@ exports[`Workspace indicator component DevWorkspaces should render RUNNING statu
       aria-label="Workspace status is Running"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -476,6 +485,7 @@ exports[`Workspace indicator component DevWorkspaces should render STOPPED statu
       aria-label="Workspace status is Stopped"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -536,6 +546,7 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
       aria-label="Workspace status is Running"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -585,6 +596,7 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
       aria-label="Workspace status is Stopped"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -645,6 +657,7 @@ exports[`Workspace indicator component SCC Mismatch should render normal status
       aria-label="Workspace status is Stopped"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -705,6 +718,7 @@ exports[`Workspace indicator component SCC Mismatch should render warning for ST
       aria-label="Workspace status is Stopped"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -782,6 +796,7 @@ exports[`Workspace indicator component SCC Mismatch should render warning triang
       aria-label="Workspace status has SCC mismatch warning"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
@@ -831,6 +846,7 @@ exports[`Workspace indicator component should render default status correctly 1`
       aria-label="Workspace status is STOPPING"
       className="statusIndicator"
       data-testid="workspace-status-indicator"
+      role="img"
     >
       <span
         className="pf-v6-c-icon pf-m-inline"
diff --git a/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/index.tsx b/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/index.tsx
index e7bbd9f9b0..3451146c49 100644
--- a/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/index.tsx
+++ b/packages/dashboard-frontend/src/components/Workspace/Status/Indicator/index.tsx
@@ -54,6 +54,7 @@ const WorkspaceStatusIndicatorComponent: React.FC<Props> = ({
   return (
     <CheTooltip content={tooltip}>
       <span
+        role="img"
         className={styles.statusIndicator}
         data-testid="workspace-status-indicator"
         aria-label={