Tactical Focus vs. :focus-visible vs. Browser Defaults

Here's a bare-bones comparison demonstrating subtle differences between Tactical Focus behavior and the `:focus-visible` CSS selector.

Comparison

We'll include this minimal CSS to make things more noticeable:

        
          .fv:focus-visible {
            outline: 4px solid purple;
          }

          .tactical-focus .tf:focus {
            outline: 4px solid purple;
          }

Spot the differences between Tactical Focus, `:focus-visible`, and browser defaults by --

  1. Tabbing through each form field
  2. Clicking/tapping on each form field individually

Browser Default Behavior

:focus-visible Behavior

Tactical Focus Behavior