System Message
3.1.1
The System Message component is a surface that is anchored to the bottom edge of the screen.
| Namn | Typ | Beskrivning |
|---|---|---|
background * | Color | Background color variant |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslations | DeepPartial | Optional override of default translations |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang | "en" |
"sv" | Language used for internal translations. |
text * | string | Provide the body text for the SystemMessage |
npm install @sj-ab/component-library.ui.system-messageExample
Example
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.
Importer av System Message
Repos med System Message
Senaste installerade version av System Message
Äldsta installerade version av System Message