Left-nav menu expand/collapse should be buttons/use disclosure pattern (a11y issue)

[batpigandme]

Bug description

Similar to #4934, the collapsed sidebar items have invalid ARIA attributes and should be buttons rather than links, and the chevron should be combined with the text so that it has a clear label.

Here's the axe issue description using the Quarto guide page as an example.

The summary of the problem from Gary:

this is a disclosure button that shows/hides a list of links. With vision you can tell that pretty easily, but having that programmatically indicated with the use of corresponding HTML elements (or at least roles) is essential for someone who can't see it.

@gtritchie described his approach for fixing this:

If I was fixing the left-nav, at a minimum, I'd want to:

• combine the label and the chevron into a single disclosure control (one tabstop), either link or button, with aria-expanded; no reason for them to be separate things when you're tabbing through the page (or navigating with screen reader)
• in addition to aria-expanded, could also have aria-controls on the disclosure pointing at the list it controls, but as far as I know no screen reader uses that information for anything so it's not essential
• the links inside the expanded region should be list items in an unordered list (and the list should be named to match its parent using either aria-labelledby="[id]" or by duplicating the parent's label in an aria-label on the list
  • this gives a screen reader user much more context; it tells them that these are the things that got exposed when they expanded the item, and tells them how many there are, and which one they are on, etc.

[cscheid]

(I'm in touch with @gtritchie about this one)

[gtritchie]

Looking at this again, the accordion pattern may be a closer fit than the disclosure approach: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.