You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Bug - PageSidebar - collapsed sidebar is aria-hidden but its navigation links stay in the tab order #12693
Describe the problem
When the Page sidebar collapses, PageSidebar renders aria-hidden={!sidebarOpen} (current main, packages/react-core/src/components/Page/PageSidebar.tsx), but nothing removes its descendants from the focus order (no inert, no tabindex="-1", and the content stays rendered). Keyboard users can Tab into a region that assistive technology is told does not exist (axe aria-hidden-focus, WCAG 4.1.2).
Observed in Keycloak 26.8.1's Admin Console (PatternFly 5 Page / PageSidebar with a nav), below the xl breakpoint where the sidebar collapses (320 and 390 CSS px): the collapsed sidebar is aria-hidden="true" while its navigation links (#nav-item-realms, #nav-item-clients, … #nav-item-user-federation) remain in the tab order.
How do you reproduce the problem?
Render a Page with a managed PageSidebar containing a Nav with links.
Narrow the viewport below the xl breakpoint so the sidebar collapses.
Run axe, or press Tab from the masthead and watch focus enter the hidden sidebar.
Expected behavior
A collapsed, aria-hidden sidebar is also removed from the focus order (inert on the sidebar, tabindex="-1" on its focusable descendants, or not rendering the content while collapsed).
Is this issue blocking you?
No. Workaround: none applied; the affected product is Keycloak's Admin Console.
What is your environment?
macOS, Chromium-based browser, PatternFly 5 as bundled in Keycloak 26.8.1; aria-hidden={!sidebarOpen} without inert is still present on main.
Any other information?
Found with axe while testing a themed Keycloak 26.8.1 Admin Console at narrow widths.
Activity