Roll Sammansatt widget

`menubar`

Markerar en behållare som en beständig menyradslist — den alltid synliga horisontella remsan med Fil/Redigera/Visa-menyer som ses i skrivbordsappar. Skiljer sig från menu, som är ett popup-element. Nästan aldrig rätt mönster på webben.

När du ska använda

För en beständig menyrad i applikationsstil som speglar en skrivbordsapps huvudmeny (Fil, Redigera, Visa, …). De mest legitima användningsfallen är i webbaserade redigeringsverktyg, IDE:er och helskärmsproduktivitetsappar.

Om din “menyrad” egentligen är en webbplats sidhuvudsnavigering är det INTE en menubar. Använd <nav> med <ul> av <a>-länkar. Menubar-rollen kräver enda tab-stop, pilnavigering och Escape för att stänga — inget av det matchar användarens förväntningar på ett webbplatssidhuvud.

Barn till en menubar är vanligtvis role="menuitem"-utlösare som öppnar undermenyer (aria-haspopup="menu").

Tangentbords- och fokuskontrakt

Enligt APG:s menyradsmönster:

Tab anger menyraden till det första eller senast fokuserade objektet; Tab flyttar UT.
Vänster/höger-pilar flyttar fokus mellan menyradsobiekt på toppnivå (med omslagning).
Nedpil (eller Enter/Mellanslag) öppnar det fokuserade objektets undermeny och flyttar fokus till dess första menyobjekt.
Uppil öppnar undermenyn och flyttar fokus till det sista menyobjektet.
Escape inuti en undermeny stänger undermenyn och återger fokus till dess menyradsobjekt.
Förtypning: att skriva en bokstav hoppar till nästa objekt som börjar med den bokstaven.

Använd ett rörligt tabindex.

Vanliga fel

role="menubar" på en webbplats primära <nav>. Skillnad mellan meddelad roll och användarens förväntningar.
Varje objekt har tabindex="0", så Tab cyklar igenom varje menyradsobjekt. Mönstret är enda tab-stop.
Undermenyer som öppnas vid hovring men inte med nedpil.
Ingen aria-haspopup/aria-expanded på menyradsobjekt som utlöser undermenyer.
Escape inuti en undermeny kollapsar men tappar fokus — måste återgå till det överordnade menyradsobjektet.

Exempel

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>