Focus management between markers and popups

[Malvoz]

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

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

1. 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).

2. 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)

3. 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:

1. Set tabindex="-1" on leaflet-popup-content-wrapper (to enable programmatic focus)
2. Send focus to leaflet-popup-content-wrapper after the popup has been opened by the user
3. Send focus back to the source element (e.g. marker) after the popup has been closed (via Esc or the Close button)
4. 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

[noobyogi0010]

Hey @Malvoz ! I would like to work upon this, if no one else is already on it. Thanks!

[Falke-Design]

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

[noobyogi0010]

@Malvoz Cool, I will get started on it.

[noobyogi0010]

@Malvoz One doubt. I have installed the dependencies into my local machine. Can you tell me how can I run the app locally? Thanks!

[Falke-Design]

You need to open a Terminal in the root of your project and run npm run watch which generates the leaflet-src.js file in the dist folder. For testing you can open /debug/map/map-mobile.html

[skorasaurus]

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.

[GhadaAJIMI]

Hi, I have a question, How did you add a listener on the button in the popup?

[Falke-Design]

@GhadaAJIMI please look into: https://stackoverflow.com/a/71176793/8283938

[zcorpan]

This might be slightly off-topic here, feel free to move to a new issue...

Does the Open UI Pop Up API proposal meet the requirements for web maps / Leaflet? https://open-ui.org/components/popup.research.explainer

(File new issues for open-ui here https://github.com/openui/open-ui/issues )

[MichaelAllenWarner]

Two points:

1. If a natural tab-order is implemented (#8113), then probably it would be best to follow the simple disclosure-widget pattern, which uses aria-expanded but does not involve automatically moving focus to the newly opened region (also means no tabindex="-1").

   It might be nice in this case to allow the user to choose what role to use for the Popup. Often there's no need for a role at all with the disclosure-pattern, but since the Popup's got a close-button I think it should have one. In some circumstances role="dialog" might be a good choice (with aria-modal="false"), but a simple role="group" would often suffice, and may be better sometimes. For example, if the map-Popup's got a button that opens a modal dialog, you'd probably want to avoid giving the map-Popup role="dialog".

2. At the risk of stating the obvious: it's important that focus be returned to the Marker on Popup-close only when the Popup was closed from within. We don't want focus going back to the Marker if the Popup was closed for some other reason (e.g., user clicked a different Marker).