From b342ce8ccdb84c89c800afc460bb867de9f00a62 Mon Sep 17 00:00:00 2001 From: avpeery Date: Fri, 17 Dec 2021 13:24:06 -0800 Subject: [PATCH 1/6] Added aria-label for interactive marker if doesn't already exist --- src/ui/marker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/marker.js b/src/ui/marker.js index 5321322f381..f354f768381 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -334,6 +334,7 @@ export default class Marker extends Evented { if (this._lngLat) this._popup.setLngLat(this._lngLat); this._element.setAttribute('role', 'button'); + if (!this._element.hasAttribute('aria-label')) this._element.setAttribute('aria-label', 'Map marker'); this._originalTabIndex = this._element.getAttribute('tabindex'); if (!this._originalTabIndex) { this._element.setAttribute('tabindex', '0'); From 1419e8028814c1c7bbccf5383485aeed0bb62738 Mon Sep 17 00:00:00 2001 From: avpeery Date: Mon, 20 Dec 2021 10:15:45 -0600 Subject: [PATCH 2/6] Added case for adding default aria-label in the case that options and an option element have been set but still do not have an aria-label --- src/ui/marker.js | 1 - test/unit/ui/marker.test.js | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/ui/marker.js b/src/ui/marker.js index f354f768381..17d1b25dfbc 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -113,7 +113,6 @@ export default class Marker extends Evented { this._rotationAlignment = options && options.rotationAlignment || 'auto'; this._pitchAlignment = options && options.pitchAlignment && options.pitchAlignment !== 'auto' ? options.pitchAlignment : this._rotationAlignment; this._updateMoving = () => this._update(true); - if (!options || !options.element) { this._defaultMarker = true; this._element = DOM.create('div'); diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js index 1475d7ed87d..dfce5ad8c37 100644 --- a/test/unit/ui/marker.test.js +++ b/test/unit/ui/marker.test.js @@ -171,6 +171,21 @@ test('Enter key on Marker opens a popup that was closed', (t) => { t.end(); }); +test('Interactive marker have a default aria-label and role attribute is set to button', (t) => { + const map = createMap(t); + const element = window.document.createElement('div'); + const marker = new Marker({color: "#FFFFFF", element}) + .setLngLat([0, 0]) + .addTo(map) + .setPopup(new Popup()); + + t.ok(marker.getElement().hasAttribute('aria-label')); + t.equal(marker.getElement().getAttribute('role'), 'button'); + + map.remove(); + t.end(); +}) + test('Space key on Marker opens a popup that was closed', (t) => { const map = createMap(t); const marker = new Marker() From 938ef7238f0cdb16db357993894a0ed6cc564725 Mon Sep 17 00:00:00 2001 From: avpeery Date: Mon, 20 Dec 2021 10:19:10 -0600 Subject: [PATCH 3/6] Fixed lint issues --- test/unit/ui/marker.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js index dfce5ad8c37..d48a7eeef7f 100644 --- a/test/unit/ui/marker.test.js +++ b/test/unit/ui/marker.test.js @@ -171,9 +171,9 @@ test('Enter key on Marker opens a popup that was closed', (t) => { t.end(); }); -test('Interactive marker have a default aria-label and role attribute is set to button', (t) => { +test('Interactive markers should have a default aria-label and a role attribute set to button', (t) => { const map = createMap(t); - const element = window.document.createElement('div'); + const element = window.document.createElement('div'); const marker = new Marker({color: "#FFFFFF", element}) .setLngLat([0, 0]) .addTo(map) @@ -184,7 +184,7 @@ test('Interactive marker have a default aria-label and role attribute is set to map.remove(); t.end(); -}) +}); test('Space key on Marker opens a popup that was closed', (t) => { const map = createMap(t); From 2159eea3165d44e7dbe26ea81798da453416c53d Mon Sep 17 00:00:00 2001 From: avpeery Date: Mon, 20 Dec 2021 10:25:35 -0600 Subject: [PATCH 4/6] Add space back in --- src/ui/marker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/marker.js b/src/ui/marker.js index 17d1b25dfbc..f354f768381 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -113,6 +113,7 @@ export default class Marker extends Evented { this._rotationAlignment = options && options.rotationAlignment || 'auto'; this._pitchAlignment = options && options.pitchAlignment && options.pitchAlignment !== 'auto' ? options.pitchAlignment : this._rotationAlignment; this._updateMoving = () => this._update(true); + if (!options || !options.element) { this._defaultMarker = true; this._element = DOM.create('div'); From 193cbb312645095379a8afa245a1397be21850ff Mon Sep 17 00:00:00 2001 From: avpeery Date: Mon, 20 Dec 2021 16:37:59 -0600 Subject: [PATCH 5/6] consolidate adding aria-label to marker --- src/ui/marker.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ui/marker.js b/src/ui/marker.js index f354f768381..32735488d53 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -117,7 +117,6 @@ export default class Marker extends Evented { if (!options || !options.element) { this._defaultMarker = true; this._element = DOM.create('div'); - this._element.setAttribute('aria-label', 'Map marker'); // create default map marker SVG const defaultHeight = 41; @@ -159,7 +158,10 @@ export default class Marker extends Evented { this._offset = Point.convert(options && options.offset || [0, 0]); } + if (!this._element.hasAttribute('aria-label')) this._element.setAttribute('aria-label', 'Map marker'); + this._element.classList.add('mapboxgl-marker'); + this._element.addEventListener('dragstart', (e: DragEvent) => { e.preventDefault(); }); @@ -334,7 +336,6 @@ export default class Marker extends Evented { if (this._lngLat) this._popup.setLngLat(this._lngLat); this._element.setAttribute('role', 'button'); - if (!this._element.hasAttribute('aria-label')) this._element.setAttribute('aria-label', 'Map marker'); this._originalTabIndex = this._element.getAttribute('tabindex'); if (!this._originalTabIndex) { this._element.setAttribute('tabindex', '0'); From 10d6d46378d82cd46e080e9eb7e0a5c3ef90b120 Mon Sep 17 00:00:00 2001 From: avpeery Date: Mon, 20 Dec 2021 16:43:30 -0600 Subject: [PATCH 6/6] remove spaces, update mbx env as attempt to fix failing test --- src/ui/marker.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/ui/marker.js b/src/ui/marker.js index 32735488d53..b756f91d4e0 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -159,9 +159,7 @@ export default class Marker extends Evented { } if (!this._element.hasAttribute('aria-label')) this._element.setAttribute('aria-label', 'Map marker'); - this._element.classList.add('mapboxgl-marker'); - this._element.addEventListener('dragstart', (e: DragEvent) => { e.preventDefault(); });