Skip to content

Commit 94fe6ea

Browse files
authored
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>
1 parent 7707b7d commit 94fe6ea

2 files changed

Lines changed: 9 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

0 commit comments

Comments
 (0)