CSS focus-visible: keep keyboard location unmistakable

How the rule works

A reviewer tabs through receipt links and action buttons. Each needs an obvious outline that remains visible against the page and does not move the layout. Outline offset separates the indicator from a dark button edge. Do not rely on a shadow alone, since forced colors may remove shadows. A scroll container or overflow-hidden wrapper can clip the indicator even when the rule is correct. Test the first and last focusable controls, keyboard navigation into dialogs, and return focus after closure. CSS does not make a div keyboard-operable; use native interactive elements first.

.receipt-action:focus-visible,
.receipt-link:focus-visible { outline: 3px solid #205c8a; outline-offset: 3px; }
@media (forced-colors: active) {
  .receipt-action:focus-visible,
  .receipt-link:focus-visible { outline-color: Highlight; }
}

Cost and verification

The outline is inexpensive to paint and does not affect box size. The failure cost is high when focus disappears inside a dense form. Test with Tab and Shift+Tab, not only a mouse click. If a component library removes outlines globally, restore them at the shared control layer rather than patching one route at a time. Keep the control's label visible as focus moves.

Common Mistakes

• Do not write outline: none without an equally visible replacement.
• Do not assume :hover covers keyboard use.
• Do not style a nonfocusable element and expect it to enter the tab order.

Connected lessons

• CSS Interaction and Accessibility
• CSS pseudo-classes: style interaction states without hiding them
• CSS overflow: contain long data without losing controls
• HTML focus order: use native controls and keep DOM order usable

Extend this decision

• CSS form states: make errors and disabled fields explicit

Property decisions

• CSS border, radius, and outline: separate box edges from focus indication
• CSS link decoration and states: preserve a visible navigation cue

Further form and type decisions

• CSS caret-color: keep the insertion point visible

Further interaction details

• CSS :focus-within: mark the active field group

Further native-state decisions

• CSS :default: mark the form's default action, not the last clicked button