Board
Tablica Kanban projektu: kolumna na każdy status, karty, które się między nimi przenoszą, i głos, który mówi, jak poszło przeniesienie. Tablica jest kontrolowana; zastosuj onMove przez moveBoardCards i zapisz. Włącz „Fail the next save”, aby zobaczyć ścieżkę błędu.
- Board
- BoardColumn
- BoardCard
- BoardAnnouncer
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Board
Drag a card, use its handle with Enter and the arrow keys, or open its menu.
To do
2 issues- search
- backend
In progress
2 issues Over the limit of 1- frontend
- accessibility
- backend
- performance
- docs
In review
0 issuesDone
1 issue- docs
Noc, podgląd: Board
Drag a card, use its handle with Enter and the arrow keys, or open its menu.
To do
2 issues- search
- backend
In progress
2 issues Over the limit of 1- frontend
- accessibility
- backend
- performance
- docs
In review
0 issuesDone
1 issue- docs
Wysoki kontrast, podgląd: Board
Drag a card, use its handle with Enter and the arrow keys, or open its menu.
To do
2 issues- search
- backend
In progress
2 issues Over the limit of 1- frontend
- accessibility
- backend
- performance
- docs
In review
0 issuesDone
1 issue- docs
UżycieLink do sekcji Użycie
import { Board, BoardColumn, BoardCard, BoardAnnouncer } from '@skribly/ui/tracker'<BoardAnnouncer message={message} />
<Board aria-label={t('board.title')} columns={columns} labels={labels}
onMove={(move) => { setColumns((c) => moveBoardCards(c, move)); save(move) }} />Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Każda kolumna jest sekcją nazwaną swoim nagłówkiem i zawiera GridList z React Aria: jeden przystanek Tab na kolumnę, klawisze strzałek między kartami, wyszukiwanie po wpisaniu według klucza i tytułu.
- Karty przenosi się przeciąganiem wskaźnikiem, klawiaturą i czytnikiem ekranu przez uchwyt przeciągania (Enter, potem strzałki i Enter, z mówionymi instrukcjami React Aria) oraz menu przenoszenia, czyli sposobem na przeniesienie jednym wskaźnikiem, o który prosi WCAG 2.5.7.
- Fokus podąża za kartą, którą przeniosło menu.
- BoardAnnouncer odczytuje zapisane przeniesienia w trybie polite, a nieudane w trybie assertive, a jego widoczny komunikat zostaje do następnego.
- Przy przekroczeniu limitu pracy w toku licznik dostaje znak ostrzeżenia i słowa z overLimit.
- Kolumny układają się w stos poniżej 48 rem i przewijają się we własnym polu powyżej niego.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.