#JavaScript

When Javascript is disabled and those items behave as links, they still have role="button" and (currently) aria-pressed="false".

In this case, they may be wrongly announced to AT as buttons instead of as links. Attached a screencast of this in VoiceOver.

Based on a Slack discussion with @cwilcox808, I suggest:

1. Rendering these items as plain links without any HTML button properties (aria-role, aria-expanded, aria-controls, etc).
2. Adding those button properties in Javascript as part of the progressive-enhancement.
3. Adding CSS based on aria-role="button" that will style these as buttons instead of links when the progressive-enhancement has happened (both for full-color and forced-colors cases).

@cwilcox808 said this about the full-color styling and aria-controls:

I think that's a good idea independent of the forced-colors state, something like:

.toolbar a[role="button"] {
  text-decoration: none;
}

Instead of .toolbar .toolbar-item including text-decoration: none.

That does open up the use of adding the underline on :hover and :focus. I really like strongly associating underlines with links (behaving as links) so I'd like to see something else used when they have [role="button"]. Without JS, the line thickness could be changed, e.g.

.toolbar a[href]:not([role="button"]):is(:focus, :hover) {
  text-decoration-thickness: 0.1875em;
}

Note that only a single assistive technology, JAWS, makes use of aria-controls so it's not very useful. The better practice is to instead have the associated element immediately follow the control so users don't have to navigate through other content from the control.

@cwilcox808 said this RE forced-colors styling for the "pressed" state of the buttons:

For aria-pressed="true", you could maybe set border-color: Highlight;, buttons in that state wouldn't have a visual change on hover but focused buttons would still have the addition of the outline.

Oddly, this issue does not show up when I search for "aria-expanded". Maybe that is because it appears inside a code tag.

If so, then it should show up now in the search.