[A11Y] [Low] Missing focus styles across the application

[continue]

Accessibility Issue: Missing focus styles across the application

WCAG Level: A
Severity: Low
Category: Keyboard Navigation Issues

Issue Description

The application's custom CSS (src/css/custom.css and component CSS modules) lacks explicit focus styles for interactive elements. While browsers provide default focus indicators, these are often insufficient or may not match the design system.

The only :focus style found in the codebase is in samples/websites/simple/styles.css, which is a sample file, not the actual application CSS.

User Impact

• Affected Users: Keyboard-only users, users with motor disabilities, users with low vision
• Severity: Users may have difficulty seeing which element is currently focused when using keyboard navigation

Violations Found

File: src/css/custom.css

No :focus or :focus-visible styles defined for any elements.

File: src/pages/index.module.css

Lines: Multiple

.navbarLink {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 1rem;
}

.navbarLink:hover {
  color: #fff;
  text-decoration: none;
}
/* Missing :focus styles */

.buttonPrimary {
  /* ... */
}

.buttonPrimary:hover {
  background: #3a8eef;
  color: white;
  text-decoration: none;
}
/* Missing :focus styles */

.buttonSecondary {
  /* ... */
}

.buttonSecondary:hover {
  border-color: #fff;
  color: white;
  text-decoration: none;
}
/* Missing :focus styles */

Issue: Multiple interactive elements have :hover styles but no corresponding :focus styles

---

Recommended Fix

Add to src/css/custom.css:

/* Global focus styles */
a:focus,
button:focus,
[tabindex]:focus {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

Add to src/pages/index.module.css:

.navbarLink:focus,
.navbarLinkActive:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.buttonPrimary:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.4);
}

.buttonSecondary:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

Changes Made:

1. Added global focus styles in custom.css
2. Added component-specific focus styles for homepage elements
3. Used :focus-visible for better mouse/keyboard differentiation

Additional Instances

Files that may need focus style review:

• src/components/ShellwrightRecording/ShellwrightRecording.module.css
• src/components/AmazonBookPreview/styles.css
• Any other custom component CSS

Testing Instructions

1. Open the application in a browser
2. Use Tab key to navigate through interactive elements
3. Verify each link, button, and interactive element has a visible focus indicator
4. Check both light and dark themes
5. Test on the homepage custom landing page specifically

Resources

• WCAG 2.4.7 Focus Visible
• MDN: :focus-visible
• A11y Style Guide - Focus Styles

Acceptance Criteria

• Global focus styles added to custom.css
• Homepage-specific focus styles added
• All interactive elements have visible focus indicators
• Focus styles work in both light and dark themes
• Manual keyboard navigation testing completed

---