Skip to content

Popover accessibility #18618

@patrickhlauke

Description

@patrickhlauke

Current implementation of popover http://v4-alpha.getbootstrap.com/components/popovers/ / http://getbootstrap.com/javascript/#popovers has a series of accessibility issues:

  • once a popover is toggled, no indication/announcement is made to AT users that anything actually happened
  • the popover is at the end of the document in source order, meaning that once a popover is triggered anywhere within the document, its content is not readily available/near the trigger, meaning that AT users won't be able to get to it easily/meaningfully
  • side effect of the previous issue: if the popover has some focusable elements/controls (see for instance example https://jsfiddle.net/y3q1e4wm/7/ ) these elements will of course also be at the end of the document, meaning that even for non-AT keyboard user they'll not be logically following the expected focus order (and require extra work like manually setting focus to them at least, though returning back to the trigger then becomes the problem)

A fix for these is non-obvious, as it may depend on the nature of the popup itself (whether it only contains text/info, or also interactive controls). If it were just short content, an approach similar to tooltip (using aria-describedby) could be used, but if the content is structured/long, this won't be ideal. Tending to think that initially, once the popover is triggered, focus should be moved to the popover and kept inside it (effectively making it a modal), though then it needs a way of escaping back to the main document (ESC key to close it and return focus back to the trigger, though lack of a visible/focusable/actionable close control may be a problem). Failing that some focus juggling that means the popover is somehow injected directly after its trigger, though this would clearly cause display / z-index / stacking order issues.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions