Zasada 06

Fokus zawsze widoczny

Część użytkowników nie używa myszy z wyboru, część z konieczności. Usunięcie obrysu fokusa, bo psuje estetykę, odbiera im nawigację. Pseudoklasa :focus-visible pokazuje obrys tylko przy klawiaturze, więc nie ma już czego ukrywać.

Odłóż mysz i wciskaj Tab

Kliknij pierwszy przycisk po lewej i przechodź Tabem przez oba panele. Po lewej zgadujesz, gdzie jesteś, po prawej widzisz.

✕ outline usunięty

✓ focus-visible z obrysem

Reguły

Style fokusa definiuje :focus-visible, mysz nie widzi obrysu, klawiatura widzi zawsze.
Obrys ma kontrast co najmniej 3:1 do tła i odstęp outline-offset od elementu.
Kolejność Tab odpowiada kolejności wizualnej, bez tabindex większego od zera.
Nic nie usuwa outline bez podania widocznego zamiennika.

Wzorzec w kodzie

Jedna globalna reguła, dokładnie ta działa na tej platformie

:focus-visible {
  outline: 2px solid var(--color-glow-400);
  outline-offset: 2px;
  border-radius: 2px;
}

Antywzorzec i wzorzec: usuwać wolno tylko dając zamiennik

button:focus { outline: none; }

button:focus-visible {
  outline: 2px solid var(--kolor-akcentu);
  outline-offset: 2px;
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zastosuj w moim projekcie zasadę „Fokus zawsze widoczny" z metodologii Liquid Design.

Interfejs daje się przejść klawiaturą, a aktualne miejsce widać na pierwszy rzut oka.

Wymagania:
- Style fokusa definiuje :focus-visible, mysz nie widzi obrysu, klawiatura widzi zawsze.
- Obrys ma kontrast co najmniej 3:1 do tła i odstęp outline-offset od elementu.
- Kolejność Tab odpowiada kolejności wizualnej, bez tabindex większego od zera.
- Nic nie usuwa outline bez podania widocznego zamiennika.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/zasady/fokus