NudgeButtons

One step up and one step down: the keyboard and single-pointer way to reorder a list, next to or in place of dragging (WCAG 2.5.7). Horizontal lists use left and right.

NudgeButtons

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, NudgeButtons

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

Dark theme, NudgeButtons

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

High contrast theme, NudgeButtons

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

UsageLink to the section Usage

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)}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Each button names the item.
The ends of the list are disabled so the position is visible without trying.
Focus follows the moved item, and moves to the partner button when the pressed one reaches an end.
The list announces the new position through its own polite live region, as the demo does.

This demo runs through axe in all three themes on every test run. See what the tests check.