Skip to content

Bug - PageSidebar - collapsed sidebar is aria-hidden but its navigation links stay in the tab order #12693

Open

Description

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?

  1. Render a Page with a managed PageSidebar containing a Nav with links.
  2. Narrow the viewport below the xl breakpoint so the sidebar collapses.
  3. 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.


Jira Issue: PF-4746

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions