From f908782fe300dce7d1dbe53e461eda8df573ebd2 Mon Sep 17 00:00:00 2001
From: Oleksii Orel <oorel@redhat.com>
Date: Tue, 12 May 2026 17:18:17 +0300
Subject: [PATCH] fix(a11y): fix invalid list structures in navigation and
 alert group (WCAG 1.3.1)

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>;
   }
 }