popover api examples need better a11y considerations

[scottaohara]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API]
but specifically the demos on https://mdn.github.io/dom-examples/popover-api/

so seemingly these files https://github.com/mdn/dom-examples/tree/main/popover-api

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

the blur-background example appears to be attempting to use the popover as a modal dialog since it demonstrates blurring the background / button that invoked the popover, popovers aren't meant to be used for modal dialogs - but if you are going to use it for such, there's other work (like making the popover exposed as a dialog, treating the background as inert) that need to be handled by the author.

the nested popover menu example appears to be a list / sub-list of links and not a menu. which is 'fine', but they keyboard navigation could be tightened up and the sub-menu would make more sense (if not an actual role=menu) to be something the user purposefully opens, rather than automatically on focus. it's an ux antipattern to force someone to navigate into a sub-list that they may have no interest in expanding.

the toast/notification example would be better if it was properly coded as a live region, so that the notification would be announced when it appears on screen. I was very specific in the example I added to the HTML spec for how this could be marked up using HTML elements alone. it'd be great if this example even just reused/turned my example into a working demo, since that markup does make live region announcements.

What did you expect to see?

i expected at least the above examples to be more accessible - or at the very least a disclaimer indicating that these examples are merely demonstrating how one could use the popover API - but that additionally accessibility considerations needed to be made for each.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/popover_api
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/popover_api/index.md
• Last commit: f8730b4
• Document last modified: 2024-01-23T15:49:46.000Z