[A11Y] [Medium] Button missing keyboard event handler in ShellwrightRecording component

[continue]

Accessibility Issue: Button missing keyboard event handler

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

Issue Description

The toggle button in the ShellwrightRecording component only has an onClick handler but no keyboard event handlers. While standard <button> elements are keyboard accessible by default (responding to Enter and Space), this should be verified to ensure proper functionality for keyboard-only users.

Additionally, the button lacks a visible focus indicator in the CSS - the :focus pseudo-class is not defined for the .toggle class.

User Impact

• Affected Users: Keyboard-only users, users with motor disabilities
• Severity: Users may have difficulty seeing when the button is focused

Violations Found

File: src/components/ShellwrightRecording/ShellwrightRecording.tsx

Lines: 35-42

<button
  className={styles.toggle}
  onClick={() => setShowPrompt(!showPrompt)}
>
  {showPrompt ? 'Show recording' : 'Show prompt'}
</button>

Issue: Button missing visible focus styles (handled in CSS module)

---

File: src/components/ShellwrightRecording/ShellwrightRecording.module.css

Lines: 32-42

.toggle {
  background: none;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--ifm-color-emphasis-700);
}

.toggle:hover {
  background: var(--ifm-color-emphasis-100);
}

Issue: Missing :focus and :focus-visible styles for visible focus indicator

---

Recommended Fix

.toggle {
  background: none;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--ifm-color-emphasis-700);
}

.toggle:hover {
  background: var(--ifm-color-emphasis-100);
}

.toggle:focus {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

.toggle:focus:not(:focus-visible) {
  outline: none;
}

.toggle:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

Changes Made:

1. Added :focus styles for visible focus indicator
2. Added :focus-visible for better mouse/keyboard differentiation

Testing Instructions

1. Navigate to any page with a ShellwrightRecording component
2. Use Tab key to focus the "Show prompt" button
3. Verify a visible focus ring appears around the button
4. Press Enter or Space to activate the button
5. Verify the toggle works correctly

Resources

• WCAG 2.4.7 Focus Visible
• MDN: :focus-visible

Acceptance Criteria

• Focus styles added to the toggle button
• Keyboard navigation works correctly
• Focus indicator is visible when using keyboard
• Manual testing completed

---