⌨ Focus Indicator Missing for Dark Mode Picker on Initial Keyboard Navigation

[MaddyDaigle]

⌨ Accessibility Issue

The focus indicator is not visible when tabbing into the dark mode picker functionality for the first time. Users cannot tell that they've tabbed into the dark mode switcher, but if they press the arrow keys to navigate to the next item, the colours change.

WCAG 2.1 Criteria

2.4.7 Focus Visible: Ensure a visible indicator is provided for all focusable elements when navigated to via the keyboard.

🦋 Expected Behaviour

When a user tabs into the dark mode picker functionality, a visible focus indicator should appear, signalling that the element is active and ready for interaction.

🕵️ Details

Operating System: Windows 10 Browser: Edge (latest version at the time of testing) Assistive Technology: Not applicable, issue observed with keyboard-only navigation.

📋 Steps to Reproduce

1. Open the webpage in Edge.
2. Use the Tab key to navigate through the page until you reach the dark mode picker functionality.
3. Observe that no visible focus indicator appears when the picker is selected.
4. Use the arrow keys to navigate within the picker and note the colour changes, indicating that focus is present but not visually represented initially.

📸 Screenshot

🙋‍♀️ Proposed Solution

Ensure that a visible focus style (e.g., outline, border, or shadow) is applied to the dark mode picker when it gains focus via keyboard navigation.

✅ Acceptance Criteria

• [ ] A visible focus indicator is present when tabbing into the dark mode picker for the first time.
• [ ] Keyboard-only users can clearly see which element has focus at all times.
• [ ] The solution adheres to WCAG 2.1 standards for focus visibility.

[mnigh]

@MaddyDaigle Thanks for creating this and other a11y issues 👍

[mnigh]

Related https://github.com/GCTC-NTGC/gc-digital-talent/issues/11571.