Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Focus management between markers and popups

See original GitHub issue

(Supersedes https://github.com/Leaflet/Leaflet/issues/2199.)

Is your feature request related to a problem? Please describe.

Popups are not reliably announced by screen readers after they’ve been opened

(they may be announced as a side effect of focus shift described in https://github.com/Leaflet/Leaflet/issues/8114, depending on the screen reader).
No logical focus order between elements (e.g. marker) and popups

(this would be more reliably solved by https://github.com/Leaflet/Leaflet/issues/8113 for scenarios where the user is simply tabbing between elements and not necessarily opening/closing popups).

#2199 (comment):

(http://bl.ocks.org/skorasaurus/9b2b96967335da91eac7676e815755d2)
Focus is not returned to the element that triggered it after a popup has been closed; the user cannot continue where they started before opening the popup.

Describe the solution you’d like

Screen readers announce content on focus delegation, and even though the modern best practice is to focus an element inside popups/dialogs Leaflet can’t guarantee interactive content inside popups, so the suggestion is to focus the popup itself:

Set tabindex="-1" on leaflet-popup-content-wrapper (to enable programmatic focus)
Send focus to leaflet-popup-content-wrapper after the popup has been opened by the user
Send focus back to the source element (e.g. marker) after the popup has been closed (via <kbd>Esc</kbd> or the Close button)
https://github.com/Leaflet/Leaflet/issues/7968 (on leaflet-popup), can be decided later

Additional context

Code demo: Leaflet.js - Better Accessibility with Javascript: adjust the behaviour of popups so that focus is shifted to the popup content when it is opened
MapBox also does this: https://github.com/mapbox/mapbox-gl-js/issues/9662

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

skorasauruscommented, Apr 21, 2022

Thanks for creating a new issue; I updated the test case that y’all can use; uses leaflet 1.8.0; it’s now at http://skorasaurus.github.io/maptemplates/leaflet-test-8115.html to reflect the new issue number.

2reactions

Falke-Designcommented, Apr 20, 2022

After closing a popup with the close button, the focus should go back to the marker of the popup

Top Results From Across the Web

Make other markers go below custom divIcon popup, instead ...

PROBLEM: When the popup is showing, any other markers on the map show on top of the popup, instead of underneath. I have...

Pop-ups: They're making a resurgence! - Chrome Developers

For focus management, you can use the autofocus attribute to move focus to an element inside a popover. This is the same as...

Marker Accessibility | Maps JavaScript API - Google Developers

This example creates five markers which are accessible. The first marker receives focus when tab is pressed; you can then use the arrow...

Markers and Popups | VMapbox

focusAfterOpen {Boolean} If true, the popup will try to focus the first focusable element inside the popup. coordinates {Array} The GeoJSON ...

Popup | Workday Canvas Design System

Focus management is important to accessibility of popup contents. The following example shows useFocusRedirect being used to manage focus in and out of...