Route Description

3.0.15

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Demo

NamnTypBeskrivning

baseKey *

string

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

disableDividers

boolean

disableMarginX

booleanDisable horizontal margin

items *

ReactElement[]List of RoutDescriptionItem

lang

InputLanguageLanguage used for internal translations.

Installation

npm install @sj-ab/component-library.ui.route-description

Länkar

Tillgänglighet

Semantik

Route Description presenteras som en WAI-ARIA-lista:

<div aria-label="Resedetaljer" role="list">
  <div role="listitem">
    <!-- Information om ett stopp på resan -->
  </div>
  <div role="listitem">
    <!-- Information om ett annat stopp på resan -->
  </div>
</div>

Tillgängligt namn

Varje Route Description Item har en anpassad uppläsning för skärmläsare. All synlig text och alla ikoner döljs med aria-hidden="true" och ersätts av en visuellt dold text.

Informationen i skärmläsartexten ska vara helt likvärdig den synliga informationen, men med förklarande ord och skiljetecken för att den ska bli lättare att förstå.

  • "18:40 Göteborg Central" blir till "Tåget avgår klockan 19:40 från Göteborg Central"

  • "22:48 Malmö C" blir till "Tåget ankommer klockan 22:48 till Malmö Central"

Utvecklare ansvarar för att skicka med en giltig translation-prop med de översättningar som ska användas i skärmläsartexten

Change log

Statistik

  • Importer av Route Description

    5
  • Repos med Route Description

    25%
  • Senaste installerade version av Route Description

    3.0.15
  • Äldsta installerade version av Route Description

    3.0.12