mapbox / mapbox-gl-accessibility

An accessibility control for Mapbox GL JS
https://labs.mapbox.com/mapbox-gl-accessibility
ISC License
68 stars 21 forks source link

Inherit mouse events #31

Open allthesignals opened 4 years ago

allthesignals commented 4 years ago

Map mouse events and their callbacks drive a large amount of 3rd party behavior in MapboxGL maps. I think the DOM nodes generated by mapbox-gl-accessibility should also inherit event callback behavior from the source features.

For example, if my map displays some zoning information, and I bind a click handler for each zone, the DOM nodes should also have click handlers bound to them...

Thoughts on this? A few drawbacks:

  1. Possibility of double-firing events
  2. Handlers might not stay in sync if un/binding occurs later
allthesignals commented 4 years ago

https://www.w3.org/TR/WCAG20-TECHS/SCR35.html

Anyone have thoughts on this? I have some sloppy code demo'ing how this might work.

allthesignals commented 4 years ago

I see, @andrewharvey has an excellent & thorough list of objectives here, this issue is one them :):

any on('click') interaction can use mapbox-gl-accessibility to provide a DOM element which can be clicked with the keyboard

allthesignals commented 4 years ago

One approach:

const { id } = feature.layer;
const layer = map.getLayer(id);

SUPPORTED_MAPBOX_MOUSE_EVENTS.forEach(event => {
  feature.marker[`on${event}`] = (e) => {
    const canvas = this.map.getCanvasContainer();

    canvas.dispatchEvent(new MouseEvent(event, {
      bubbles: true,
      clientX: position.x,
      clientY: position.y,
    }));
  };
});

I tried to use the sorta private/sorta public map.fire event but it's finicky. This approach is also finicky and I don't know why. Here's what I'm observing: DOMNode.click on the ARIA node works great, but after I do a "real" click, subsequent DOMNode.clicks no longer trigger the mapbox-gl event.