Daily Accessibility ReviewNavigation Group Link Has tabindex="-1", Inaccessible to Keyboard Users

[github-actions[bot]]

Problem Description

In shell/components/nav/Group.vue, when a navigation group has an "overview" (i.e., clicking the group header navigates to a route), the <router-link> inside the header has tabindex="-1". This means the link is not reachable via keyboard Tab navigation.

The parent <div class="header"> element has role="button" and tabindex="0", which means keyboard users can focus it and press Enter to activate the link. However, the actual <a> element (the router-link) is explicitly removed from the tab order with tabindex="-1". This breaks the expected keyboard navigation semantics: screen readers may announce the element as a "button" rather than a "link", and the URL destination is not communicated to the user.

WCAG 2.2 Violations

• **[2.1.1 Keyboard (Level A)]((www.w3.org/redacted) All functionality must be operable through a keyboard interface. Focusable elements that perform navigation should be reachable by keyboard.
• **[4.1.2 Name, Role, Value (Level A)]((www.w3.org/redacted) For all user interface components, the name and role can be programmatically determined. Wrapping a <router-link> (which renders as <a>) in a role="button" div and hiding the link from assistive technologies misrepresents the interactive element's role.

Relevant Code

shell/components/nav/Group.vue (lines 259–283):

<div
  v-if="showHeader"
  class="header"
  role="button"
  :tabindex="fixedOpen ? -1 : 0"
  :aria-label="group.labelDisplay || group.label || ''"
  :aria-expanded="!canCollapse || isExpanded"
  `@click`="groupSelected()"
  `@keyup`.enter="groupSelected()"
  `@keyup`.space="groupSelected()"
>
  <slot name="header">
    <!-- Group overview with link -->
    <router-link
      v-if="hasOverview && hasChildren"
      :to="headerRoute"
      :exact="group.children[0].exact"
      :tabindex="-1"    <!-- ⚠️ link hidden from keyboard navigation -->
    >
      <h6>
        <span v-clean-html="group.labelDisplay || group.label" />
      </h6>
    </router-link>

Impact

This affects the primary "Cluster" navigation item in the secondary sidebar. When a user with keyboard-only navigation focuses the "Cluster" group header, the browser announces it as a button (not a link), and the destination URL is not announced.

Recommended Fix

Restructure the header to use the <router-link> as the primary focusable element with tabindex="0", and remove the role="button" wrapper or convert it to a non-focusable container. The aria-expanded and aria-controls attributes for the accordion behavior can be placed on the toggle chevron button, which already has its own role="button" and tabindex="0".

Generated by Daily Accessibility Review · ● 1.8M · ◷

• expires on May 28, 2026, 8:31 AM UTC