Zasady | Skribly UI

1. Jeden akcentLink do sekcji 1. Jeden akcent

Bursztyn jest jedynym akcentem. Oznacza główną akcję widoku, bieżący element i obwódkę fokusa, i nic więcej. Kolory statusu służą do statusu: zielony mówi „zrobione”, czerwony „nie udało się”. Gdy wszystko jest kolorowe, nic się nie wyróżnia.

Rób tak. Daj widokowi jeden główny przycisk i pozwól pozostałym ustąpić.

Nie rób tak. Każdy przycisk jako główny albo kolor niebezpieczeństwa dla akcji, która niczego nie niszczy.

2. Kolor nigdy samLink do sekcji 2. Kolor nigdy sam

Około jeden mężczyzna na dwunastu nie odróżnia czerwonego od zielonego, a tryb wysokiego kontrastu systemu Windows zastępuje każdy kolor. Dlatego każdy stan łączy kolor ze słowem, znakiem albo kształtem. Plakietki niosą słowo, alerty niosą słowo tonu dla czytników ekranu i ikonę o własnym kształcie, a bieżąca strona ma pasek, a nie tylko podbarwienie.

PassedWaitingFailed

Rób tak. Powiedz stan słowami i dodaj znak, gdy pozwala na to miejsce.

Nie rób tak. Zostaw kropce koloru samo niesienie znaczenia.

3. Dostępność domyślnieLink do sekcji 3. Dostępność domyślnie

Dostępny sposób jest jedynym, jaki daje komponent. Zachowanie pochodzi z React Aria, więc obsługa klawiatury, zarządzanie fokusem i semantyka dla czytników ekranu podążają za wzorcami ARIA. Obwódka fokusa jest zwykłym CSS w domyślnych stylach strony, więc kontrolka, która zapomni o własnej, nadal ją pokazuje. Cele mają co najmniej 24 na 24 piksele, komunikaty, które przychodzą później, są odczytywane, a ruch się zatrzymuje, gdy czytelnik prosi o mniej.

Celem jest WCAG 2.2 AA. Strona Dostępność wymienia, co biblioteka robi dla każdego kryterium i za co nadal odpowiada aplikacja.

4. Brak wbudowanego tekstuLink do sekcji 4. Brak wbudowanego tekstu

Aplikacje mają własne pliki językowe, więc żaden komponent nie zawiera własnego słowa. Każda widoczna etykieta i każda nazwa dostępna, aż po przycisk zamknięcia toastu, jest propem. Brakująca etykieta to błąd typów, a nie po cichu angielska wartość domyślna.

Etykiety pochodzą z aplikacjitsx

<ToastViewport
  toneLabels={{ ok: t('tone.ok'), info: t('tone.info'), warn: t('tone.warn'), danger: t('tone.danger') }}
  closeLabel={t('toast.close')}
  regionLabel={t('toast.region')}
/>

5. Działa z Reactem i bez niegoLink do sekcji 5. Działa z Reactem i bez niego

Strona marketingowa w Astro i aplikacja w Reakcie powinny wyglądać jak jeden produkt. Klasy czystego CSS odpowiadają komponentom React, więc strona bez JavaScriptu dostaje ten sam przycisk, pole, kartę i komunikat.

React

tsx

<Button variant="outline">Cancel</Button>

Czysty CSS

html

<button class="sk-button sk-button--outline">Cancel</button>

6. Tokeny w pierwszej kolejnościLink do sekcji 6. Tokeny w pierwszej kolejności

Komponenty używają semantycznych narzędzi, takich jak bg-surface i text-muted, nigdy koloru szesnastkowego, klasy gray-* ani wariantu dark:. Tokeny decydują, jak wygląda powierzchnia w każdym motywie, więc komponent jest poprawny w każdym motywie, nie wiedząc, który jest włączony.

Rób taktsx

<div className="border-border bg-surface text-fg" />

Nie rób taktsx

<div className="bg-white text-gray-900 dark:bg-gray-900" />