Mission 16: Keyboard Navigation Lockdown
The previous developer disabled the default focus outline across the entire system, making keyboard navigation impossible. Restore it with a high-visibility alternative.
00:00
Mission Objective
Remove the `button:focus { outline: none; }` rule and replace it with a `:focus-visible` rule that applies a `3px solid cyan` outline to the buttons.
Step 1 / 2
System Briefing: Keyboard Navigation Lockdown
A shuttle pilot, who uses a specialized hands-free rig with keyboard-only inputs, is stuck in a "focus trap" on the pre-flight checklist. The focus outline is invisible, and the tab order is illogical. You must repair the navigation sequence.
Focus Visibility & DOM Order
- Focus State: It is critical to never remove the default focus outline (
*:focus { outline: none; }) without providing a highly visible alternative. The:focus-visiblepseudo-class is the modern way to style focus indicators only for keyboard users. - DOM Order: The order of elements in your HTML document (the DOM) determines the default tab navigation sequence. The visual order should always match the DOM order for a logical and predictable user experience.