popover api examples need better a11y considerations

### 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](https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute:~:text=A%20popover%20can%20be%20useful%20for%20rendering%20a%20status%20message%2C%20confirming%20the%20action%20performed%20by%20the%20user.%20The%20following%20demonstrates%20how%20one%20could%20reveal%20a%20popover%20in%20an%20output%20element.) 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: https://github.com/mdn/content/commit/f8730b451b37940432ea4203fa78a0454e3efee6
* Document last modified: 2024-01-23T15:49:46.000Z