System Message

3.2.4

The System Message component is a surface that is anchored to the bottom edge of the screen.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

background *

ColorBackground color variant

customAttribute

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

customTranslations

DeepPartialOverride default translations with custom text.

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

lang

"en" | "sv"Language used for internal translations.

text *

stringProvide the body text for the SystemMessage

Installation

Kodexempel
npm install @sj-ab/component-library.ui.system-message

Länkar

Best practices

Example

System Message example

Example

Tillgänglighet

Semantik

System Message presenteras för användaren som en region (role="region") med en textparagraf inuti.

Tillgängligt namn

Regionen runt meddelandet har fått ett inbyggt namn "Viktiga meddelanden" med aria-label för att den ska vara enkel att hitta med skärmläsare.

Namnet kan ändras eller skrivas över med propen customTranslations.

WAI-ARIA

System message använder WAI-ARIA rollen role="status" för att meddelandet ska bli uppläst automatiskt när det först dyker upp eller när det ändras.

Läsordning

System Message ska alltid placeras nära toppen av sidstrukturen inuti ett <header>-landmärke och efter navigationen. Detta gör att läsordningen för hjälpmedel blir naturlig och förutsägbar och informationen blir lätt att hitta.

Change log

Statistik

  • Importer av System Message

    2

  • Repos med System Message

    5%

  • Senaste installerade version av System Message

    3.2.3

  • Äldsta installerade version av System Message

    3.2.3