Focus should be managed between markers and popups

[nfreear]

Problem

Focus order should be logical and meaningful. At present, when a popup is opened in Leaflet, keyboard focus is not placed on the popup. When the popup is closed, focus is not placed back on the triggering marker element.

• WCAG Success Criteria 2.4.3 Focus Order.
• Core Leaflet bug(s): Focus management between markers and popups Leaflet/Leaflet#8115, Logical focus- and reading order between markers and popups Leaflet/Leaflet#8113.

Solution

On popup open:

popupElem.role = 'dialog';
popupElem.setAttribute('tabindex', '-1');
popupElem.focus();

triggerElem.ariaExpanded = 'true';

On popup close:

if (triggerElem) {
  triggerElem.focus();
  triggerElem.ariaExpanded = 'false';
}

Leaflet API / plugin dev. notes:

• Handle the popupopen and popupclose Leaflet events.

---

[robinmetral]

I see that some of this has been addressed (cf. demo). Is it considered closed? On a related note, popups should probably close when pressing ESC, and perhaps they should also trap focus (modal dialog pattern)—thoughts?

[nfreear]

Hi @robinmetral,

Thanks for the comments. To address your points:

Is it considered closed?

Yes. I need to tidy up!

... popups should probably close when pressing ESC.

Good point. I've raised this in #22.

... perhaps they should also trap focus (modal dialog pattern)—thoughts?

In the general case, pop-ups triggered when activating a map marker should not be modal, so I don't think they should trap focus.

(FYI, in Leaflet/Leaflet/issues/7968, a contributor argues that map pop-ups are not always dialogs.)

If a modal dialog was needed for a specific application, you could extend the built-in Popup class.

I hope that helps.

Yours,

Nick

---

P.S. I'm always interested to know if and/or where you're thinking of using Leaflet.a11y plugin 😉

You may also find Leaflet.translate useful.

[robinmetral]

Thanks for the detailed follow-up! Not using the plugin at the moment, still evaluating mapping libraries options for a personal project. I definitely will if going for Leaflet (plus I'd be happy to join efforts improving a11y, code and docs) 🙂

Cheers!