diff --git a/spec/suites/control/Control.LayersSpec.js b/spec/suites/control/Control.LayersSpec.js index ad86ced68..77dab7e3a 100644 --- a/spec/suites/control/Control.LayersSpec.js +++ b/spec/suites/control/Control.LayersSpec.js @@ -377,4 +377,37 @@ describe('Control.Layers', () => { expect(elems[4].innerHTML.trim()).to.be.equal('Marker A'); }); }); + + it('refocus map after interaction', () => { + const baseLayers = {'Layer 1': new TileLayer(''), 'Layer 2': new TileLayer('')}, + control = new Control.Layers(baseLayers).addTo(map); + + const spy = sinon.spy(map.getContainer(), 'focus'); + map.getContainer().focus(); + expect(spy.calledOnce).to.be.true; + + // simulate keyboard-click event + spy.resetHistory(); + UIEventSimulator.fire('click', control._baseLayersList.getElementsByTagName('input')[0], { + screenX: 0, + screenY: 0, + }); + expect(spy.calledOnce).to.be.false; + + // simulate MouseEvent at 0, 1 + spy.resetHistory(); + UIEventSimulator.fire('click', control._baseLayersList.getElementsByTagName('input')[0], { + screenX: 0, + screenY: 1, + }); + expect(spy.calledOnce).to.be.true; + + // simulate MouseEvent + spy.resetHistory(); + UIEventSimulator.fire('click', control._baseLayersList.getElementsByTagName('input')[0], { + screenX: 100, // random number - not 0 + screenY: 100, // random number - not 0 + }); + expect(spy.calledOnce).to.be.true; + }); }); diff --git a/src/control/Control.Layers.js b/src/control/Control.Layers.js index 5a9287d0f..2344fe897 100644 --- a/src/control/Control.Layers.js +++ b/src/control/Control.Layers.js @@ -371,7 +371,7 @@ export const Layers = Control.extend({ return label; }, - _onInputClick() { + _onInputClick(e) { // expanding the control on mobile with a click can cause adding a layer - we don't want this if (this._preventClick) { return; @@ -409,7 +409,7 @@ export const Layers = Control.extend({ this._handlingClick = false; - this._refocusOnMap(); + this._refocusOnMap(e); }, _checkDisabledLayers() { diff --git a/src/control/Control.js b/src/control/Control.js index aa7612cbe..ce7b24ead 100644 --- a/src/control/Control.js +++ b/src/control/Control.js @@ -104,8 +104,9 @@ export const Control = Class.extend({ }, _refocusOnMap(e) { - // if map exists and event is not a keyboard event - if (this._map && e && e.screenX > 0 && e.screenY > 0) { + // We exclude keyboard-click event to keep the focus on the control for accessibility. + // The position of keyboard-click events are x=0 and y=0. + if (this._map && e && !(e.screenX === 0 && e.screenY === 0)) { this._map.getContainer().focus(); } }