Daily Accessibility ReviewLogin page toggle buttons are inaccessible to keyboard users ((a role="button") without href or keyboard handlers)

[github-actions[bot]]

Summary

The login page uses <a> elements with role="button" but without an href attribute or keyboard event handlers. This makes these interactive elements inaccessible to keyboard-only users.

Problem

In shell/pages/auth/login.vue, two <a> elements are used as buttons:

<!-- Link shown when SSO is active to switch to local login -->
<a
  id="login-useLocal"
  data-testid="login-useLocal"
  role="button"
  `@click`="toggleLocal"
>
  {{ t('login.useLocal') }}
</a>

<!-- Link shown to switch back to SSO providers -->
<a
  role="button"
  `@click`="toggleLocal"
>
  {{ nonLocalPrompt }}
</a>

Both elements:

1. Have no href attribute — so they are not natively focusable via Tab key
2. Have no tabindex="0" — so keyboard users cannot reach them
3. Have no keyboard event handlers — elements with role="button" must respond to both Enter and Space key presses per the ARIA authoring practices

As a result, keyboard-only users (including screen reader users) cannot access the "Use Local Login" / "Back to SSO" toggle on the login page.

WCAG 2.2 References

• WCAG 2.2 SC 2.1.1 – Keyboard (Level A)

  All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

• WCAG 2.2 SC 4.1.2 – Name, Role, Value (Level A)

  For all user interface components, the name and role can be programmatically determined.

Reference: (www.w3.org/redacted)
ARIA button pattern: (www.w3.org/redacted)

Fix

Either use a real <button> element, or fix the <a> elements:

Option A (preferred) — use <button>:

<button
  id="login-useLocal"
  data-testid="login-useLocal"
  class="btn-link"
  `@click`="toggleLocal"
>
  {{ t('login.useLocal') }}
</button>

Option B — fix the <a> element:

<a
  id="login-useLocal"
  data-testid="login-useLocal"
  role="button"
  tabindex="0"
  `@click`="toggleLocal"
  `@keyup`.enter="toggleLocal"
  `@keyup`.space.prevent="toggleLocal"
>
  {{ t('login.useLocal') }}
</a>

Affected File

shell/pages/auth/login.vue — lines 532–551

Generated by Daily Accessibility Review · ● 1.8M · ◷

• expires on May 29, 2026, 8:25 AM UTC