Layer context menu is not focused / announced when Shift-F10 is pressed with focus on layer item

[prushforth]

Steps to reproduce

Load this page: https://maps4html.org/experiments/styling/alternate-styles/

Press Tab 6 times - focus should be on layer control
Press Enter - layer control open - focus should shift to first layer entry (imo), but does not
Press Tab - focus now on checkbox of first layer
Press Shift-F10 (on windows) - layer context menu appears, focus should be on first menu item but is not
Press Tab - focus should shift to second context menu item, but actually moves to next interactive element in layer control entry (X usually) Context menu remains visible but inaccessible, except through shortcut keys (which are not announced).

[Malvoz]

Press Enter - layer control open - focus should shift to first layer entry (imo), but does not

Just noting that this is also mentioned in #247 (comment):

• Focus should be delegated to the layer menu (e.g. to a tabindex="-1" on container, or first layer item) after activating the layer control, at least for keyboard users.
  • Upstream Leaflet: TODO.

[prushforth]

Thank you for your attention to detail, @Malvoz

[Anshpreet8]

@ahmadayubi / @prushforth If I focus on the layermenu and tab out of it, the focus is no longer on the map (since it's last in the DOM). Side note: this is also the case for the contextmenu. If I add a tabindex="-1" to the layermenu, the focus then shifts to the entire map-region again. I would like the focus to be on the same layer on the layer control, any recommendations on any workarounds?

Screen.Recording.2021-11-18.at.2.31.20.PM.mov

[prushforth]

Yes I would like it to go back to the previous menu item too, or possibly the next, but certainly not out of the map again! As mentioned on gitter, let's see if inserting into the DOM right before or after the element that gets right-clicked may work.

[ahmadayubi]

@Anshpreet8 Something similar happened with feature pop up tabbing. The solution in that case was to handle the tab (keyboard) event and force focus using event handlers.

https://github.com/Maps4HTML/Web-Map-Custom-Element/blob/0a6fd929594e16d25a4f1f72b2fffc27540a1589/src/mapml/layers/MapLayer.js#L1230-L1245

It's not a trivial task as there are multiple cases you have to account for, including SHIFT+TAB.