/* ============================================================ FOCUS SYSTEM — what a keyboard user sees, in the site's own idiom (task 3124) ============================================================ Martien, 10-09: "hoe wil je dit zichtbaar maken? en op pc/laptop vind ik het vreselijk, zon blok om je focus heen. maar op mobiel is het vast handig" Two things in that sentence, and they pull in opposite directions only until you know what :focus-visible does. WHAT HE WAS LOOKING AT was not a design decision. Roughly two thirds of the focusable elements on this site had no focus rule at all, so the browser drew its own: Chrome's white-on-black double ring, a hard rectangle that ignores the page entirely. That is the "blok" — nobody chose it, it was the fallback. :focus-visible IS THE ANSWER TO THE PC HALF. It paints only when the browser judges that a visible indicator is wanted, which in practice means keyboard and assistive-tech navigation. Click a button with a mouse and nothing appears. So on a laptop, driving with a trackpad, he will not see any of this — which is the point. AND IT CORRECTS THE MOBILE HALF. Touch does not raise :focus-visible either, so this is not "handig op mobiel"; on a phone it is invisible too. The people it is for are keyboard users, screen-reader users, and anyone with a motor impairment who cannot aim a pointer. Mobile gains nothing here and loses nothing. THREE SHAPES, chosen by Martien from four options ("site-eigen idioom"): the site already says "this is live" in one visual language, the gold hairline, and focus should speak it rather than import a generic ring. fields a 2px gold line under the field, the same statement .bi-search__bar::after already makes when the big search input wakes up (main.css:3077) buttons a 2px gold ring at 3px offset, drawn OUTSIDE the button and deliberately NOT the hover fill links the gold underline at 2px, 4px clear of the text WHY THE BUTTON RING DOES NOT FILL. Before this file, buttons.css:155 read `.bi-cta:hover, .bi-cta:focus-visible` — one rule, both states. A hovered button and a keyboard-focused button were pixel-identical, so tabbing through a group told you nothing a mouse had not already said, and on a page where the pointer happens to rest on a button you could not tell which one the keyboard was on. Hover is "your pointer is here"; focus is "your next Enter lands here". Different facts, different marks. That coupling is removed in this commit. HOW IT ATTACHES — this file is a floor, not a ceiling. Every selector here is deliberately low specificity (one element or one class), and the sheet loads last. The 28 bespoke focus rules that already existed — the hero's inset ring, the lightbox arrows, the dashboard tabs — all outrank it and keep winning. This fills the two thirds that had nothing, and standardises the shape of what it fills. NOT IN SCOPE: the wp-admin login screen. It has its own inline stylesheet in functions.php and never loads theme CSS, so its focus rule is fixed there instead of here. ============================================================ */ /* --bi-focus-w and --bi-focus-offset live in tokens.css (3128), with the rest of the measurements. One width for all three shapes: buttons already share a 2px border (--bi-btn-bw), so a 2px focus mark sits in the same weight class instead of reading as a second, thinner system, and the 3px offset puts the ring far enough off the box that it is clearly a separate mark and not a border that changed colour. */ /* ── The floor ───────────────────────────────────────────────────────── Everything focusable, including the things this file does not name: [tabindex] wrappers, summary elements, iframes, video controls, and whatever gets added next year. If a component wants something else it only has to be more specific than a bare pseudo-class, which every existing focus rule on this site already is. This is the rule that replaces Chrome's double ring, so it is also the one that has to be visible against every background the site uses. Gold on the navy ground clears the 3:1 non-text contrast requirement with room to spare; the browser default did not, on the full-bleed photography. */ :focus-visible { outline: var(--bi-focus-w) solid var(--gold); outline-offset: var(--bi-focus-offset); } /* ── Fields ──────────────────────────────────────────────────────────── The gold line under the field, which is what the big search input has always done. The line is a box-shadow rather than a border so nothing reflows by 2px at the moment of focus, and it hugs the bottom edge rather than ringing the box: a text field is a place you write on a line, and that is the shape the site already uses to say so. The border goes gold at the same time. Most of these fields did that already on plain :focus; stating it here means the ones that did not now match, and the ones that did are unaffected. */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 var(--bi-focus-w) 0 0 var(--gold); } /* Checkboxes and radios are not lines you write on. They keep the ring. */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: var(--bi-focus-w) solid var(--gold); outline-offset: var(--bi-focus-offset); box-shadow: none; } /* Neither is a file picker or a colour swatch — both render as a button inside the input, so an underline sits under the wrong thing. */ input[type="file"]:focus-visible, input[type="color"]:focus-visible, input[type="range"]:focus-visible { outline: var(--bi-focus-w) solid var(--gold); outline-offset: var(--bi-focus-offset); box-shadow: none; } /* An is a button wearing an input's tag. It follows the button rule below, not the field rule above. Defensive: every submit on the public site is a real