Stop telling a reader the menu sections are ARIA menus

[DZPM]

A section of the main menu opens a list of links. It was marked up as an ARIA menu and is not one: the control carried aria-haspopup="true", which means a menu, and the list under it named itself after the control with aria-labelledby on a plain div, which the HTML validator rejects. That is three errors on each of the 253 built pages that carry the menu, and on the home page they are the only errors it has. This is the open item of #190.

The way to make them valid is role="menu" on the div and role="menuitem" on each link, and that is a promise this cannot keep. An ARIA menu owes the keyboard arrow keys between the items, a roving tabindex, and Escape to close, and Bootstrap 4 gives none of the three here. A reader who is told it is a menu and then finds a list of links is worse off than one who was told nothing.

So two attributes go instead of one arriving. What is left is the disclosure pattern of the ARIA practices, which is what this already is: a control that says whether it is open, and the content it shows. role="button" and aria-expanded stay and carry it. The id of the control goes with the label, because nothing else read it.

Measured over the whole build

Leaving the frozen copies under /archives/ out:

	Before	After
div with aria-labelledby and no role	759, three on each of 253 pages	0
aria-haspopup	7 per page	0
aria-labelledby pointing at a missing id	0	0

The dangling id, the other half of the same #190 item, was fixed earlier.

The menu still works

Driven in Chromium: the three sections open and close on a click, the control flips aria-expanded between true and false, and the first section shows its 10 links.