NudgeButtons

Jeden krok w górę i jeden w dół: sposób zmiany kolejności listy klawiaturą i pojedynczym wskaźnikiem, obok przeciągania albo zamiast niego (WCAG 2.5.7). Listy poziome używają lewej i prawej.

NudgeButtons

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: NudgeButtons

1.Introduction
2.Installation
3.Configuration
4.Troubleshooting

Noc, podgląd: NudgeButtons

1.Introduction
2.Installation
3.Configuration
4.Troubleshooting

Wysoki kontrast, podgląd: NudgeButtons

1.Introduction
2.Installation
3.Configuration
4.Troubleshooting

UżycieLink do sekcji Użycie

tsx

import { NudgeButtons } from '@skribly/ui/actions'

tsx

<NudgeButtons
  label={`Reorder ${item}`}
  previousLabel={`Move ${item} up`}
  nextLabel={`Move ${item} down`}
  isFirst={index === 0}
  isLast={index === items.length - 1}
  onMove={(direction) => move(index, direction)}
/>

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żdy przycisk nazywa pozycję.
Końce listy są wyłączone, więc pozycję widać bez próbowania.
Fokus podąża za przesuniętą pozycją i przechodzi na przycisk partnerski, gdy naciśnięty dojdzie do końca.
Lista ogłasza nową pozycję przez własny region na żywo typu polite, tak jak robi to przykład.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.