From 1594e6271352e3175c12cbe4ca4654d653cd5fb6 Mon Sep 17 00:00:00 2001
From: Lior Chamla <lchamla@gmail.com>
Date: Mon, 6 Jan 2025 23:42:12 +0000
Subject: [PATCH] feat(marker.ts): only add aria-label if the custom element
 does not already has one

---
 CHANGELOG.md          |  3 +++
 src/ui/marker.test.ts | 12 ++++++++++++
 src/ui/marker.ts      |  5 ++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e63fb75a3..d6239f2afb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 ## main
 
 ### ✨ Features and improvements
+
+- Now only adds `aria-label` on the Marker's element if it does not already has one ([#5298](https://github.com/maplibre/maplibre-gl-js/pull/5298))
+
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
diff --git a/src/ui/marker.test.ts b/src/ui/marker.test.ts
index 28f8d29ae0..b958b68011 100644
--- a/src/ui/marker.test.ts
+++ b/src/ui/marker.test.ts
@@ -260,6 +260,18 @@ describe('marker', () => {
         expect(marker.getElement().getAttribute('aria-label')).toBe('alt title');
     });
 
+    test('Marker aria-label is not set if the element already has one', () => {
+        const map = createMap({locale: {'Marker.Title': 'alt title'}});
+        const customHtmlElement = document.createElement('div');
+        customHtmlElement.setAttribute('aria-label', 'custom aria label');
+
+        const markerWithHtmlElement = new Marker({
+            element: customHtmlElement
+        }).setLngLat([10, 10]).addTo(map);
+
+        expect(markerWithHtmlElement.getElement().getAttribute('aria-label')).toBe('custom aria label');
+    });
+
     test('Marker anchor defaults to center', () => {
         const map = createMap();
         const marker = new Marker()
diff --git a/src/ui/marker.ts b/src/ui/marker.ts
index 8440e1e58b..975874f769 100644
--- a/src/ui/marker.ts
+++ b/src/ui/marker.ts
@@ -316,7 +316,10 @@ export class Marker extends Evented {
     addTo(map: Map): this {
         this.remove();
         this._map = map;
-        this._element.setAttribute('aria-label', map._getUIString('Marker.Title'));
+
+        if (!this._element.hasAttribute('aria-label')) {
+            this._element.setAttribute('aria-label', map._getUIString('Marker.Title'));
+        }
 
         map.getCanvasContainer().appendChild(this._element);
         map.on('move', this._update);