Modal dialog

Användningsområde

Modaler är en form av dialogruta som används när en kritisk handling behöver någon form av bekräftelse exempelvis arkivera underlag, ta bort användare, editera enhetsinformation mm. I en modal måste ett alternativ väljas exempelvis avbryt/spara för att kunna stänga den modalen.

Vid tillfällen då alternativ som avbryt/spara och andra liknande situationer så ska fokus i modalen sättas på det minst kritiska alternativet. Det innebär att exempel “ta bort användare” så är det minst kritiska alternativet avbryt och därmed bör fokus sättas på avbryt.

I positiva fall skall fokus sättas på det alternativ som användaren mest sannolikt kommer att välja, som i situationen där en användare ska sparas avbryt/spara. I detta fall ska fokusmarkeringen vara på spara och inte avbryt.

Avstånd till komponenter i modal.

Exempel på olika modaler.

Acceptanskriterier

• Innehåll i modalen följer tema
• Modalen skall anpassas efter textinnehållet i höjd
• Skall låsa applikationen och mörka bakgrunden (svart bakgrund som är 65% transparent)
• En modal skall alltid ha en rubrik (med marginaler enligt skiss)
• En modal skall alltid ha knappar och placeras i nedre kant (enligt skiss)
• Innehållet skall ha rätt avstånd till rubrik, knappar och kanterna enligt skiss
• Knapparna ska kunna vara inaktiva och aktiva
• Modalen får minst vara 450 px och max 1080 x px i stora lilla läget. I det stora läget är minsta 500 px och det största 1130 px.
• Bredden på modalen kan ändras till valfri bredd mellan den minsta och den största bredden.
• Padding och margin inom modalen beter sig som innan, alltså förändringen vid brytgränsen: padding-top på hela contentet (30/38px) samt margin-bottom på titeln (30/32px).
• Det går att sätta en bredd på modalen.
• Default är den minsta storleken.

Tillgänglighetskrav
När en modal öppnas flyttas fokus till ett element i dialogrutan. Se nedan om initial fokusering.

• Tab:

  • Flyttar fokus till nästa element i dialogrutan.
  • Om fokus ligger på det sista tabbara elementet inuti dialogrutan, flyttas fokus till det första tabbara elementet inuti dialogrutan.

• Shift + Tab:

  • Flyttar fokus till föregående element i dialogrutan.
  • Om fokus ligger på det första tabbara elementet inuti dialogrutan, flyttas fokus till det sista tabbara elementet inuti dialogrutan.

• Elementet som fungerar som dialog har roll som dialog.

• Alla element som krävs för att använda dialogen är nästkommande till elementet som har rollen "dialog".

• Dialogbehållarelementet har aria-modal inställt på "true".

• Dialogen har antingen:

• Ett värde satt som "aria-labelledby" som ska referera till en synlig dialogtitel

• En etikett som är specificerad med en "aria-label".

Det är valbart om "aria-describedby" är satt på elementet som har rollen "dialog" för att indikera vilket element eller vilka element i dialogen vars innehåll beskriver det primära syftet eller meddelandet av modalen. Att specificera descriptiva meddelanden möjliggör för skärmläsare att läsa upp beskrivningen i samband med titeln på modalen och det första fokuserade elementet i dialogen när den öppnas.