Repository metrics
- Stars
- (8,900 stars)
- PR merge metrics
- (Avg merge 7d 3h) (147 merged PRs in 30d)
Description
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
- 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: https://github.com/mdn/content/commit/f8730b451b37940432ea4203fa78a0454e3efee6
- Document last modified: 2024-01-23T15:49:46.000Z