Exempel
Denna komponent är inte utvecklad ännu. Design finns i Figma.
Designspecifikation
Modaler används för dialoger eller felmeddelande där komponenten Tillfälligt meddelande: information och faktaruta - 1177 inte är applicerbar.
Modalen har vit bakgrund med standard hörnradie på 10 px. Tona ner ytan mot bakomliggande sida med 60% opacitet (stone-dark).
För 1177 profession används grå rubrik (standardfärg för rubriker).
Do’s and Don’ts
Använd primär och sekundära knappar för att vikta knappvalen och leda användaren i flödet.
Det ska alltid finnas en möjlighet att stänga modalen, tex via tillbaka-knapp som leder gå tillbaka till den vy man var på. Alternativt via stäng-kryss i övre högra hörnet.
Tillgänglighet
För att göra modaler tillgängliga så är det några saker man behöver se till:
Vi använder rätt role (role=”dialog”).
Se till att det finns en label på komponenten genom aria-labelledby och möjligtvis aria-describedby.
Overlayen av modalen bör vara en “child” av <body>-elementet.
När modalen öppnas sätts fokus på det första fokuserbara elementet i modalen.
När modalen stängs får du fokus där du var innan du gick in i modalen.
Användaren ska inte kunna klicka på saker utanför eller navigera sig ur modalen när den är aktiv.
Användaren ska kunna stänga modalen med ESC-knappen.
Läs mer på: https://bitsofco.de/accessible-modal-dialog/
I fallet med felmeddelanden genom modal så behöver vi även ha rätt aria-live attribut anpassat till situationen.
Research på komponenten
-
Relaterade resurser/komponenter
-
Status
Status | KOD SAKNAS DESIGN/BESKRIVNING FÄRDIG FÖR TEST / INVÄNTAR GRANSKNING |
---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |