Language selector ARIA implementation

[ppvg]

From independent accessibility report, SC 3.3.2:

Op pagina components/header-example-language-select-list.html staat een element waarmee een taal geselecteerd kan worden. Deze heeft visueel geen label. Omdat het op zichzelf voldoende duidelijk is wat er gebeurt als er een taal wordt geselecteerd, is dit ook niet verplicht. Het kan echter wel om de functie nog iets duidelijker te maken. In de code is visueel verborgen tekst aanwezig, maar deze is niet gekoppeld aan het veld, doordat het aria-describedby attribuut op een div-element staat.

From independent accessibility report, SC 4.1.2:

Op pagina components/header-example-language-select-list.html staat een uitklapbaar element waarmee een andere taal geselecteerd kan worden. Dit is nu een knop (button-element). Het aria-expanded-attribuut, waarmee wordt aangegeven wat de waarde (in- of uitgeklapt) is, staat echter op een div-element dat eromheen staat. Dit attribuut moet op het interactieve element staan, het element dat daadwerkelijk wordt in- en uitgeklapt. Deze informatie wordt hierdoor nu niet goed overgebracht.

The language selector places aria-describedby and aria-expanded on the wrapper div. It should instead be on the interactive element, the button.

Additionally, we should look into whether the role="listbox" is correct. It might make sense to implement the ARIA APG's Navigation Menu Button Example here instead.

[ppvg]

Additional comments: when using role="listbox", the child elements should also get the appropriate role, "option". See Listbox Pattern (apg).