mapbox-gl-accessibility icon indicating copy to clipboard operation
mapbox-gl-accessibility copied to clipboard

Inherit mouse events

Open allthesignals opened this issue 6 years ago • 3 comments

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 avatar Jan 21 '20 19:01 allthesignals

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 avatar Jan 26 '20 20:01 allthesignals

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 avatar Jan 26 '20 20:01 allthesignals

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.

allthesignals avatar Jan 26 '20 20:01 allthesignals