Stepper

5.0.1

Steppers allow users to increase or decrease the number in a single button press.

Demo

Installation

npm install @sj-ab/component-library.ui.stepper

Länkar

Best practices

Tillgänglighet

Semantik

Stepper är tänkt att vara ett SJ-designat alternativ till en vanlig <input type="number">.

Komponenten presenteras antingen enbart som en text med aktuellt värde och två knappar för att öka eller minska, eller som en kombination av knapparna och ett redigerbart sifferinmatningsfält .

<!-- Default -->
<p>
  Current value:  0
</p>
<button tabindex="-1" type="button" aria-label="Decrease value No label stepper" role="button" aria-disabled="true"></button>
<button tabindex="0" type="button" aria-label="Increase value No label stepper" role="button"></button>

<!-- Editable -->
<input aria-invalid="false" aria-describedby="example2-helper" id="example2" type="number" aria-label="Editable stepper (min: 0 max: 9)" min="0" max="9" value="0">
<button tabindex="-1" type="button" aria-label="Decrease value Editable stepper" role="button" aria-disabled="true"></button>
<button tabindex="0" type="button" aria-label="Increase value Editable stepper" role="button"></button>

WAI-ARIA

Komponenten använder aria-live för att automatiskt läsa upp det nya värdet för skärmläsaranvändare när värdet ändras.

Det finns också dolda, extra instruktioner för att tydliggöra komponentens funktion:

"Skriv in ett nummer eller använd upp- och nedpilarna för att ändra antalet"

Instruktionerna kopplas ihop med inmatningsfältet med aria-describedby och läses upp när fältet får fokus.

Change log

Statistik

Importer av Stepper

Repos med Stepper

Senaste installerade version av Stepper

5.0.0

Äldsta installerade version av Stepper

4.1.17

<!-- Default -->
<p>
  Current value:  0
</p>
<button tabindex="-1" type="button" aria-label="Decrease value No label stepper" role="button" aria-disabled="true"></button>
<button tabindex="0" type="button" aria-label="Increase value No label stepper" role="button"></button>

<!-- Editable -->
<input aria-invalid="false" aria-describedby="example2-helper" id="example2" type="number" aria-label="Editable stepper (min: 0 max: 9)" min="0" max="9" value="0">
<button tabindex="-1" type="button" aria-label="Decrease value Editable stepper" role="button" aria-disabled="true"></button>
<button tabindex="0" type="button" aria-label="Increase value Editable stepper" role="button"></button>