Daily Accessibility ReviewFocus Outline Removed on Interactive Elements Without Replacement Indicator

[github-actions[bot]]

Accessibility Issue: Focus Outline Removed on Interactive Elements

Several stylesheets and components explicitly remove the browser's default focus outline (outline: 0 / outline: none) on interactive or focusable elements without providing an alternative visible focus indicator. This violates WCAG 2.2 Success Criterion 2.4.7 – Focus Visible (Level AA) and the stronger 2.4.11 – Focus Appearance (Level AA, new in WCAG 2.2).

"Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible." — [WCAG 2.2 §2.4.7]((www.w3.org/redacted)

Removing the focus ring with no replacement makes it impossible for keyboard-only users to know which element is currently focused.

---

Affected Files (selection)

1. shell/assets/styles/global/_labeled-input.scss — line 72–75

SELECT,
SELECT:hover,
SELECT:focus {
  border: none;
  background-color: transparent;
  outline: 0;   // ← removes focus indicator on <select> elements
  box-shadow: none;
  ...
}

The SELECT:focus rule removes the focus outline from <select> form controls without providing any other visible indicator.

2. shell/assets/styles/global/_select.scss — lines 65, 113

outline: none;

Removes outline inside the custom select dropdown, affecting keyboard navigation within dropdowns.

3. shell/components/nav/Group.vue — lines 380, 404, 419, 580

outline: none;

Navigation group items have their focus outline removed. While some :focus-visible rules exist elsewhere in the nav, these rules may still suppress the outline in certain browsers/contexts.

4. shell/components/nav/TopLevelMenu.vue — multiple locations (e.g. lines 1013, 1081, 1085, 1225, 1679)

outline: 0;  // or outline: none;

Several interactive elements in the top-level menu (cluster items, backdrop, buttons) have their focus indicators removed.

---

Steps to Reproduce

1. Open the Rancher Dashboard and press Tab repeatedly to navigate through the page using only the keyboard.
2. On form <select> elements and several navigation items, the focus indicator disappears — there is no visible indication of which element has keyboard focus.

---

Suggested Fix

Instead of removing the focus outline globally, use :focus-visible (which only shows the ring for keyboard focus, not mouse clicks) and ensure a visible alternative is present:

// Instead of removing outline entirely:
SELECT:focus {
  outline: 0;  // ❌
}

// Use focus-visible and provide a replacement indicator:
SELECT:focus-visible {
  outline: 2px solid var(--focus-outline);  // ✅
  outline-offset: 2px;
}

The codebase already uses @include focus-outline mixin in several places — this pattern should be applied consistently wherever outline: none/0 is set on focusable elements.

---

WCAG References

• 2.4.7 Focus Visible (Level AA): (www.w3.org/redacted)
• 2.4.11 Focus Appearance (Level AA, WCAG 2.2 new): (www.w3.org/redacted)

Generated by Daily Accessibility Review · ● 1.3M · ◷

• expires on May 27, 2026, 8:26 AM UTC