Make popups keyboard accessible

[lizziegooding]

Motivation

This feature request came in from a user in Help Scout who wants to be able to tab to focus, open, and close popups. They mentioned needing this feature specifically to meet accessibility requirements for government and non-profit funded projects.

Design Alternatives

They coded their own workaround, and we could ask users to do the same in the future. Providing this feature would make our maps more accessible to more users out of the box.

cc @mollymerp

[denistsoi]

@lizziegooding - can you add the ticket details (it requires a login) - thx

[lizziegooding]

hey @denistsoi, for privacy reasons I'm not including any private communication with our customers to users outside of Mapbox, just a summary of their request.

[denistsoi]

@lizziegooding I understand the necessity fro privacy - but i'm hoping to understand a bit more on how they interact with the map.

I read more into the article, and the keycodes that they currently use are 13/27 (enter/escape) respectively.

the reason why i was asking about that, was what other keyboard presses are required? - (I didn't know this, there is some keyboard navigation functionality found in keyboard.js).

One thing I'd like to raise is, say the developer uses layers instead of markers (i.e. baked into the canvas, how would one go about determining the next point/bbox/geometry - also what about say, if markers are clustered) - these are a little bit trickier i think.

However, for markers, I think wrapping that functionality into a plugin might be more effective in the short-run?

[denistsoi]

thinking about this some more - i think this may require some discussion/opinions

because: for instance, say the tab is focused onto the map - how do you differentiate between the user's intention to cycle through the markers/open popup - to say the rest of the site?

I'm not entirely experienced with accessibility - (hence probing for opinions/thoughts)

[andrewharvey]

One thing I'd like to raise is, say the developer uses layers instead of markers (i.e. baked into the canvas, how would one go about determining the next point/bbox/geometry - also what about say, if markers are clustered) - these are a little bit trickier i think.

I think it's best to keep this ticket focused on Popup (and Marker, since Popup's can be bound to Markers in GL JS), since they are HTML elements.

If users want to make Layers accessible, then I think it's best left to them to create their own invisible Markers kept in sync with the Layers.

because: for instance, say the tab is focused onto the map - how do you differentiate between the user's intention to cycle through the markers/open popup - to say the rest of the site?

Since all the Popup/Marker elements are children of the map, don't screen readers have a way for users to jump back up/out of the Marker elements inside the map?

[andrewharvey]

As a side note, Google Maps has pretty good support for selecting POI's on the map with the keyboard.

[andrewharvey]

https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup. If a Popup is bound to a Marker on hover then the Marker should have aria-haspopup=true, not sure if this extends to on click too.

[adrianbw]

Hi—I'm the requester here. Happy to answer any questions. Andrew, thanks for the reminder about area-haspopup.

[andrewharvey]

On one hand while using a button element for the Marker might provide better native support,
just adding the keypress handlers like in 7e22a37 might also work. I haven't done enough testing on this yet, just just an experiment.

[thetwosents]

Just wanted to bring this back to top that we ran into similar issue with test and delivery on the WCAG support for keyboard accessibility.

I saw a plugin somewhere, but implementation details were a little lacking.

Does anyone have any declarative ways to handle keyboard accessibility for mapbox?

[andrewharvey]

Just wanted to bring this back to top that we ran into similar issue with test and delivery on the WCAG support for keyboard accessibility.

I saw a plugin somewhere, but implementation details were a little lacking.

Does anyone have any declarative ways to handle keyboard accessibility for mapbox?

@thetwosents

If you're using Popups bound to your Marker (ie setPopup) then #6835 means it should be handled for you, is that not the case?

If you're opening the Popup from a Marker yourself (ie. not using setPopup) then you should build accessibility support on your side.

For example this is how I usually do it (some React code here, but easy to adapt), where el is your marker element.

        el.addEventListener('keydown', e => {
          // enter or space on the marker should open/close the popup
          if (e?.key === 'Enter' || e?.key === ' ') {
            // toggle popup
            setPopupOpen(current => !current)
          // esc on the marker should close the popup
          } else if (e?.key === 'Escape') {
            setPopupOpen(false)
          }
        })
        // esc when focused on the map should close an open popup
        mapContainer.current.addEventListener('keydown', e => {
          if (e?.key === 'Escape') {
            setPopupOpen(false)
          }
        })

        // make the marker act like a button and allow it to receive keyboard focus
        el.setAttribute('role', 'button')
        el.setAttribute('tabindex', '0')

[thetwosents]

Hey Andrew,
I did something similar to this and super appreciate the code share. I added aria-label onto each of my labels, and that worked like a charm.

I did have an interesting situation with the mapbox canvas though. Because the mapbox canvas (and attribution elements) have a tabindex of 0 / roles attached, I had to override them to -1 / disabled to get my page to cycle through the tab presses correctly.

Basically it went 1. Sidebar 2. Map Region 3. Ships 4. Url bar 5. Map Region 6. Then it would start using the actual aria-labels of the map.

It ended up looking like this and worked quite well:

document.querySelector('.mapboxgl-canvas').tabIndex = -1; document.querySelector('.mapboxgl-canvas').disabled = true; document.querySelector('.mapboxgl-ctrl-logo').tabIndex = -1; document.querySelector('.mapboxgl-ctrl-logo').disabled = true; document.querySelector('.mapboxgl-ctrl-attrib-inner a').tabIndex = 8; document.querySelector('.mapboxgl-ctrl-attrib-inner a').disabled = true; document.querySelector('.mapboxgl-ctrl-bottom-right').disabled = true; document.querySelector('.mapboxgl-ctrl-bottom-right').tabIndex = 8;

The tags had to have a higher tabindex because they can't be disabled.