Dropdown Select

Användningsområde

En dropdown(dropdown select) används främst vid många alternativ och det är möjligt att låta användaren välja ett alternativ i dropdown eller flera. Om de tillgängliga alternativen är fler än 20 så visas även ett sökfält i dropdownen som gör det enklare att hitta bland alternativen. Detta gäller både för dropdown multi och dropdown enkel.

Dropdown-checkbox
Fler än 5 alternativ rekommenderas att visas i dropdown.

Openclosed
Exempel på öppen och stängd dropdown.

Kravspecifikation

Följer tema
Finns i två defaultstorlekar
Liten
- 180 px i bredd innan brytgräns
  Stor
- 287 px i bredd efter brytgräns
Det går att definiera egen storlek
Vid fler än 20 alternativ visas sökfält i dropdownen
Sökfältet i dropdown filtrerar alternativen allteftersom användaren fyller i sökordet bokstav för bokstav
Listan(alternativen) tillhörande dropdown har en maxhöjd och innan dess anpassa sig till antalet alternativ i listan
- Växer aldrig mer än 390 px i höjd(innan brytgräns)
- Växer aldrig mer än 364 px (i liten) efter brytgräns
- Därefter visas en scrollbar och en gradient i nederkant som indikerar på att det finns fler alternativ än vad som visas i listan.
Scrollbar i listan skall visas när det finns mer alternativ i listan än vad som finns plats (dvs fler än 8)
Hover över val i dropdown gör att alternativ blir fetmarkerad med markerad vänsterlinje som i min sida menyn 4x30 px
Alternativ kan visas på flera rader
Vid klick varsomhelst utanför dropdownens alternativlista stänger dropdownen
Sista synliga raden i listan skall dimmas enligt design när scrollbaren syns
Det finns möjlighet att konfigurera egen placeholdertext i dropdown, defaulttext är "Välj"
Om inget alternativ finns valt så visas ingenting vid readonly
Långa alternativnamn radbryts(dock aldrig vid hover)
Fokus på och i dropdown visas med 3 px blå markering
Dropdown kan visas som inaktiv
Dropdownens alternativlista kan linjeras i höger och vänsterkant

Specifika krav för dropdown enkel:

Klick på val i väljer och stänger dropdown
När dropdown är stängd och ett alternativ är valt visas det "Alternativet"
När det valda namnet är förlångt för att få plats i stängd dropdown bryts det med "..."
I dropdown enkel finns möjlighet att rensa valt alternativ
Läsläge visar det valda alternativet i fulltext

Specifika krav för dropdown multi:

Klick på alternativ väljer och markerar kryssruta(stänger inte dropdown)
Valt alternativ är fetmarkerat(bold) och kryssruta är markerad
När dropdown multi är stängd och flera alternativ är valda visas "x st valda", "namn, namn..." eller "Alla(x/x) valda"
- Vid många och långa namn bryts text med ... i stängd dropdown
Klick på "Välj alla" väljer samtliga alternativ(stänger inte dropdownen)
På hover på stängd dropdown visas tooltip som listar hela strängen med valda alternativ separerade med komma
Läsläget visar alla valda alternativ i fulltext i en punktlista(De valda alternativen visas separerade med kommatecken mellanslag ", ")

Tillgänglighetskrav

När dropdown är i fokus, läser skärmläsaren
- Om den saknar rubrik "'Välj avdelning' i listruta"
- Om den har en rubrik "'Välj rubrik' i listruta"
Enter
- Om fokus är på den stängda dropdown: Öppnar listboxen och fokus hamnar på
  - Tidigare valt alternativ, eller
  - Om ingenting var valt på sökfältet, om det finns, eller
  - På det första i listan.
- Om fokus är någonstans i listan/listboxen: Kollapsar listboxen och väljer det alternativ som är i fokus. Flyttar fokus till den stängda dropdownen.
- Om fokus är på knappen "Ta bort", återställer alla val och stänger listboxen.
Escape, om listboxen är öppen: Kollapsar listboxen och flyttar fokus till den stängda dropdownen.
Pil ned
- Om fokus är någonstans i listan/listboxen: Flyttar fokus till nästa alternativ nedåt.
- Om fokus är på sista alternativet, flyttas inte fokus.
- Om fokus är på den stängda dropdownen: Öppnar listboxen och fokus hamnar på nästa alternativ i listan, nedan tidigare valt alternativ, eller på det första i listan om inget var valt.
Pil upp
- Om fokus är någonstans i listan/listboxen: Flyttar fokus till nästa alternativ uppåt.
- Om fokus är på den stängda dropdownen: Öppnar listboxen och fokus hamnar på föregående alternativ i listan, över tidigare valt alternativ, eller på det första i listan om inget var valt.
- Om något är valt, flyttar fokus från alternativ 1 till knappen "Ta bort" och sedan till sökfältet.
- Om ingenting är valt, flyttar fokus direkt från alternativ 1 till sökfältet.
- Om fokus är på första alternativet/sökfältet och inga navigerbara saker finns ovanför, flyttas inte fokus.
Home, om fokus är någonstans i listan/listboxen: Flyttar fokus till sökfältet om det finns, alternativt det första alternativet i listan.
End, om fokus är någonstans i listan/listboxen: Flyttar fokus till det sista alternativet i listan.
Teckentangent (bokstäver, siffror och underscore "word characters"): Flyttar fokus till nästa alternativ vars namn startar med tecknet.
Flera teckentangenter i snabb följd: Flyttar fokus till nästa alternativ vars namn startar med den följd av tecken som angivits.

I tillägg till ovanstående beteende, gäller även följande för dropdown multi:

Enter, om fokus är på "Välj alla"
- Om alla alternativ är valda: Avväljer alla och stänger
- Annars: Väljer alla och stänger
Mellanslag
- Om fokus är på "Välj alla": togglar mellan att välja alla eller avvälja alla alternativ. Skärmläsaren säger "alla alternativ valda" resp. "inga alternativ valda".
- Annars: växlar status mellan ej vald och vald på det fokuserade alternativet. Skärmläsaren läser upp ny status.
Control + A:
- Om alla alternativ redan är valda: Väljer alla alternativ i listan. Skärmläsaren säger "alla alternativ valda".
- I alla andra fall: Avväljer alla alternativ. Skärmläsaren säger "Inga alternativ valda".
Pil upp
- Om fokus är på det första alternativet, flyttar fokus till "Välj alla" och sedan till sökfältet om det visas.
- Om fokus är på "Välj alla" och inga navigerbara saker finns ovanför, flyttas inte fokus.
Skärmläsaren läser alternativets text, dess status (valt, inte valt) och dess position i listan, respektive totalt antal "X av Y".