Recode popovers as (conceptual) modal dialogs

Currently, popovers https://getbootstrap.com/docs/4.3/components/popovers/ provide a baseline accessible implementation where the content of the popover, when shown, is tied to the trigger via aria-describedby="...". This works well when popovers are used for their intended purpose - to provide a short notification/tooltip type popover message. However, looking at some of the recent issues here in github all relating to authors complaining about links, forms, etc getting stripped out of their popovers, it’s clear that authors are using these beyond their intended purpose, and instead as a way to have a form of disclosure widget that opens a floating menu/dropdown type area with interactive content.

For these sorts of “povovers”, the current approach is completely unsuitable. aria-describedby="..." will announce the entire content of the popover in one go, as a single long “blob” of content. Keyboard focus is not moved to the popover, and as the popovers are generally at the end of the document, this means that a keyboard user can trigger one of these, but then has to navigate through the rest of the document before they reach the interactive controls that the author crammed into the popover - and if they chose to make it a dismissable popup, it likely would disappear again as soon as they move focus themselves off the trigger.

Originally, I thought about simply putting a small notice on the popover documentation page to advise authors not to use these for anything interactive, but obviously this wouldn’t stop authors actually doing it, and our recent addition of sanitize code sends the signal that in the end, we’re ok with them doing it / making it easy for them.

So, while it would require a complete (breaking) refactor, if we want to keep popovers and allow them to be (mis)used this way, we should recode these to conceptually act like a modal dialog (but without the semi-transparent overlay):

• user activates the popover, focus is moved to the “popover”
• popover container has a role="dialog")
• focus is retained /cycled inside the popover
• the underlying page is hidden from assistive technologies using aria-hidden
• provide an “x” close control, and also react to “ESC” - focus is then moved back to the trigger element

For authors that do want to retain the current way popovers work for short, tooltip-like, non-inteactive notices only, maybe https://getbootstrap.com/docs/4.3/components/popovers/ can be extended to provide this as an additional option/style. And popovers can be treated as a visually different type of modal (kind of an “in-between” somewhere halfway between a tooltip and a full modal).

xref https://github.com/twbs/bootstrap/issues/18618 / https://github.com/twbs/bootstrap/issues/28411/ https://github.com/twbs/bootstrap/issues/24640 / https://github.com/twbs/bootstrap/issues/24290

[patrickhlauke]

additionally, i’d drop the ability to have only hover as the trigger, as that immediately makes popovers not work for keyboard/assistive tech users. popovers should just show on click only (as even just doing it on focus hover would cause accessibility issues for keyboard users, as they’d then be dragged into the modal popover every time they just cycle through the page)

[pglejzer]

do you have any plan to implement this with version 5? @mdo