fix(a11y): fix invalid list structures in navigation and alert group (WCAG 1.3.1)

[olexii4]

What does this PR do?

Fixes two violations of WCAG 2.2 criterion 1.3.1 Info and Relationships (Level A).

WCAG 1.3.1 requires that information conveyed through visual presentation (including list structure) is also available programmatically. When <ul> or <ol> elements contain children that are not <li>, <script>, or <template>, screen readers cannot correctly announce list context or item count, breaking the programmatic relationship for assistive technology users.

Fix 1 — Navigation sidebar: NavGroup nested inside NavList

File: src/Layout/Navigation/RecentList.tsx

The "Recent Workspaces" section wrapped a NavGroup (which PatternFly renders as <section class="pf-v6-c-nav__section">) inside a NavList (which renders as <ul class="pf-v6-c-nav__list" role="list">). This produced the invalid structure:

<!-- Before (invalid) -->
<ul class="pf-v6-c-nav__list" role="list">
  <section class="pf-v6-c-nav__section">  <!-- <section> not allowed directly in <ul> -->
    <ul>
      <li>...</li>
    </ul>
  </section>
</ul>

NavGroup already creates its own internal <ul> for its NavItem children — the outer NavList wrapper was redundant and structurally invalid.

Fix: remove the NavList wrapper from NavigationRecentList. NavGroup now sits directly inside the Nav element alongside NavigationMainList, producing valid HTML:

<!-- After (valid) -->
<nav aria-label="Navigation">
  <ul class="pf-v6-c-nav__list">       <!-- NavigationMainList -->
    <li>Create Workspace</li>
    <li>Workspaces (N)</li>
  </ul>
  <section class="pf-v6-c-nav__section">  <!-- NavigationRecentList (NavGroup) -->
    <h2>RECENT WORKSPACES</h2>
    <ul>
      <li>workspace-name</li>
    </ul>
  </section>
</nav>

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

-  return (
-    <NavList>
-      <NavGroup title="RECENT WORKSPACES" style={{ marginTop: '25px' }}>
-        {recentWorkspaceItems}
-      </NavGroup>
-    </NavList>
-  );
+  return (
+    <NavGroup title="RECENT WORKSPACES" style={{ marginTop: '25px' }}>
+      {recentWorkspaceItems}
+    </NavGroup>
+  );

Fix 2 — Toast alert group: empty <ul role="list">

File: src/components/AppAlertGroup/index.tsx

AppAlertGroup unconditionally rendered <AlertGroup isToast>, which PatternFly renders as <ul role="list" class="pf-v6-c-alert-group pf-m-toast">. When there are no active alerts the list is empty — a role="list" element with no role="listitem" children violates 1.3.1.

Fix: return an empty fragment when there are no alerts (consistent with the existing guard in WorkspaceProgress/Alert/index.tsx):

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

---

Screenshot/screencast of this PR

What issues does this PR fix or reference?

fixes https://redhat.atlassian.net/browse/CRW-10232

Is it tested? How?

• Verified with browser DevTools Accessibility panel that <ul> elements contain only valid <li> children.
• Manually verified with macOS VoiceOver on Chrome that the navigation sidebar now announces correct list structure and item count.

Release Notes

Docs PR

[che-bot]

Click here to review and test in web IDE:

[github-actions]

Docker image build succeeded: quay.io/eclipse/che-dashboard:pr-1564 (linux/amd64, linux/arm64)

kubectl patch command

kubectl patch -n eclipse-che "checluster/eclipse-che" --type=json -p="[{"op": "replace", "path": "/spec/components/dashboard/deployment", "value": {containers: [{image: "quay.io/eclipse/che-dashboard:pr-1564", name: che-dashboard}]}}]"

[svor]

/retest

[svor]

lgtm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.51%. Comparing base (7395441) to head (f908782).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1564   +/-   ##
=======================================
  Coverage   92.50%   92.51%           
=======================================
  Files         561      561           
  Lines       55890    55892    +2     
  Branches     4219     4223    +4     
=======================================
+ Hits        51700    51706    +6     
+ Misses       4142     4138    -4     
  Partials       48       48           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dmytro-ndp]

@olexii4 : I tested Eclipse Che Next with the User Dashboard image quay.io/eclipse/che-dashboard:pr-1564, and there was correct HTML sctructure:

1. Left sidebar menu and page navigation (html elements .pf-v6-c-nav__list) lists had the correct structure <ul><li>...:

2. There were no <ul> elements defined as a ‘list' that didn’t contain child elements.

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: dmytro-ndp, olexii4, svor

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment