Document List: Add aria-expanded to dropdown menu example button

[timveld]

Waar

html|css - docunment list

Aanleiding

Op de uitvouwbare knopjes ("AFDELING 1.1 Algemeen") ontbreekt aria-expanded.

Werkzaamheden

aria-expanded toevoegen

Gebruikersimpact

Kritiek: als dit ook in de implementatie zit weet een blinde gebruiker niet dat de knop iets uitvouwt.

[tfrijsewijk]

Aria attributen toevoegen in dropdown-menu.css-template.ts.

[hansgrimm]

• De issue gaat over document-list, maar de aanpassing moet in dropdown-menu.css-template.ts. Hebben we het dan niet over een aanpassing van dropdown-menu?
• Als ik naar dropdown-menu.css-template.ts kijk, dan ga ik ervan uit dat de aanpassing in de button moet. Daar is neem ik aan een conditional voor nodig, net als de andere attributen. hoe doe ik dat?
• De role in die button is menuitem of menuitemradio. Volgens https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role is aria-expanded daar geen geldig attribuut voor.` @timveld wa vinde gij?

[hansgrimm]

Okee, aria-expanded schijnt tegenwoordig te kunnen op role = menuitem: w3c/aria#454

Nu alleen nog op de knop toggelen, ik ga kijken of ik daar op eigen kracht uit ga komen :)

[hansgrimm]

Volledig op het verkeerde been gezet vermoed ik. De aria-expanded moet volgens mij op de knop die het menu opent. Klopt dat, @timveld ?

[timveld]

@hansgrimm klopt, aria-expanded moet op de knop die het menu opent.

[tfrijsewijk]

De issue gaat over document-list, maar de aanpassing moet in dropdown-menu.css-template.ts. Hebben we het dan niet over een aanpassing van dropdown-menu?

Klopt! Aangepast.

[hansgrimm]

@timveld het dropdown menu webcomponent in Storybook (https://storybook.dso-toolkit.nl/62.18.0/?path=/story/core-dropdown-menu--anchors) doet het conform WCAG. Het probleem in deze issue is dat het statische uitgeklapte voorbeeld in html/css document-list geen (statisch) aria-expanded="true" attribuut heeft.
Is dit iets dat we toch moeten aanvullen? want als je het webcomponent inzet, moet het namelijk gewoon goed gaan.

[timveld]

@tfrijsewijk Web component is inderdaad wel correct.
Het voorbeeld moet ook kloppen, en volgens mij was de aanleiding ook dat dit ergens in een implementatie niet goed zat.
Maar als het web vomponent zeker wordt ingezet, is er misschien inderdaad weinig aan de hand.

[hansgrimm]

@tfrijsewijk Web component is inderdaad wel correct. Het voorbeeld moet ook kloppen, en volgens mij was de aanleiding ook dat dit ergens in een implementatie niet goed zat. Maar als het web vomponent zeker wordt ingezet, is er misschien inderdaad weinig aan de hand.

Ik heb het voor de volledigheid toch maar aangepast :)

[tfrijsewijk]

De Web Component implementatie van "Dropdown Menu" was goed, (de markupvoorschriften van de) HTML/CSS implementatie was niet goed.

Vooralsnog ondersteunen we beide implementaties. Hans heeft het bijgewerkt 👍