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 #18618 / #28411 #24640 / #24290
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):
role="dialog")aria-hiddenFor 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 #18618 / #28411 #24640 / #24290