Re: ARIA help - how to mark up a popup info panel?

It sounds like you’re trying to create a disclosure.

Does https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ (or one of the other disclosure patterns) help here?

Removing menu and aria-popup sounds like the right action. You should probably add aria-controls to the button but honestly it won’t make much difference as aria-controls is woefully undersupported.

The alternative approach that respec uses makes the popups modal dialogs and moves focus to/from them when they open. Honestly - I prefer the inline approach you are taking here though.

--James

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Friday, February 17, 2023 at 10:54 AM
To: spec-prod@w3.org Prod <spec-prod@w3.org>
Subject: ARIA help - how to mark up a popup info panel?
Hey all, I recently tried to fix up the behavior and semantics of the
"info panels" that pop up in specs when you click on dfns, showing all
the places that reference the definition.

Currently, the markup structure is:

<dfn>foo</dfn>
...spec stuff...
</main>
<aside>
  ...all the references for "foo"
</aside>

Then at runtime I:

* give the dfns role=button, tabindex=0, and a keypress listener so
they respond to Space and Enter, opening or closing their
corresponding panel.
* move the asides to be siblings of the dfns, so the default tab order
will work. (they can't be siblings in the original markup, since most
block elements auto-close <p> elements during parsing.) Also set a
keypress listener on them so Escape will auto-close while you're in
them.
* set aria-expanded=true on the dfns when the corresponding panel is
open, false when it's not.

So far, I *think* this is correct; at least, it's the best guess at
correct I was able to glean from about an hour of reading MDN and
various Google searches. The panels aren't part of the normal flow of
content (they're closer to footnotes), so <aside> seems to be the
right element for them, and turning the dfns into buttons semantically
seems relatively harmless and overall the right thing to do for
interactivity reasons.

But it appeared there was more I could do, specifically involving the
aria-haspopup attribute. The panels are, after all, popups. However,
my original solution turned out wrong and was causing validation
failures. What I tried to do was:

* set `aria-haspopup=menu` on the dfns (this seemed like the most
correct value of the five)
* set `role=menu` on the asides (it seemed like I needed to make the two match)

However, "menu" isn't an allowed role value for asides, so specs were
suddenly failing HTML validation.

My question is - what *should* I be doing here? For now I'm ripping
out the latter parts from Bikeshed, retaining just the button/tabindex
stuff.

~TJ