Set ‘aria-label’ attribute on <button>s to their ‘title’ attribute value.

2 files changed, 17 insertions, 6 deletions

diff --git a/index.html b/index.html
index 9e34a5b..a64e0ab 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
         <div class="modal-content">
           <div class="modal-header py-2">
             <h5 class="my-0">Källor och licensinformation</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" title="Stäng" aria-label="Stäng"></button>
           </div>
           <div class="modal-body pt-2">
             <ul class="mb-2">
diff --git a/main.js b/main.js
index d43a87c..b752e3e 100644
--- a/main.js
+++ b/main.js
@@ -221,8 +221,9 @@ if (window.location !== window.parent.location) {
   const btn = document.createElement('button');
   div.appendChild(btn);
   btn.type = 'button';
-  btn.setAttribute('aria-expanded', 'false');
   btn.title = 'Öppna karta i ny flik';
+  btn.setAttribute('aria-label', btn.title);
+  btn.setAttribute('aria-expanded', 'false');
   btn.classList.add('btn', 'btn-light');
 
   const i = document.createElement('i');
@@ -252,8 +253,9 @@ if (window.location !== window.parent.location) {
     const btn = document.createElement('button');
     div.appendChild(btn);
     btn.type = 'button';
-    btn.setAttribute('aria-expanded', 'false');
     btn.title = 'Lagerval';
+    btn.setAttribute('aria-label', btn.title);
+    btn.setAttribute('aria-expanded', 'false');
     btn.classList.add('btn', 'btn-light');
 
     const i = document.createElement('i');
@@ -272,9 +274,9 @@ if (window.location !== window.parent.location) {
     const btn = document.createElement('button');
     div.appendChild(btn);
     btn.type = 'button';
-    btn.setAttribute('aria-expanded', 'false');
-    btn.title = 'Byt kartlager';
     btn.title = 'Teckenförklaring';
+    btn.setAttribute('aria-label', btn.title);
+    btn.setAttribute('aria-expanded', 'false');
     btn.classList.add('btn', 'btn-light');
 
     const i = document.createElement('i');
@@ -337,7 +339,9 @@ if (window.location !== window.parent.location) {
     keys: true,
     target: menu,
   })
-  control.element.getElementsByTagName('button')[0].classList.add('btn', classInactive);
+  const btn = control.element.getElementsByTagName('button')[0];
+  btn.classList.add('btn', classInactive);
+  btn.setAttribute('aria-label', btn.title);
   map.addControl(control);
 
   control.addEventListener('enterfullscreen', function() {
@@ -351,6 +355,7 @@ if (window.location !== window.parent.location) {
     const btn = control.element.getElementsByTagName('button')[0];
     btn.classList.replace(classInactive, classActive);
     btn.title = titleActive;
+    btn.setAttribute('aria-label', btn.title);
 
     const exp = document.getElementById('export-to-image');
     if (exp !== undefined) {
@@ -369,6 +374,7 @@ if (window.location !== window.parent.location) {
     const btn = control.element.getElementsByTagName('button')[0];
     btn.classList.replace(classActive, classInactive);
     btn.title = titleInactive;
+    btn.setAttribute('aria-label', btn.title);
 
     const exp = document.getElementById('export-to-image');
     if (exp !== undefined) {
@@ -388,6 +394,7 @@ if (window.location !== window.parent.location) {
   btn.classList.add('btn', 'btn-light');
   btn.type = 'button';
   btn.title = 'Ladda ner som en PNG-fil';
+  btn.setAttribute('aria-label', btn.title);
 
   const i = document.createElement('i');
   btn.appendChild(i);
@@ -439,6 +446,7 @@ if (window.location !== window.parent.location) {
   btn.type = 'button';
   btn.setAttribute('aria-expanded', 'false');
   btn.title = 'Visa information';
+  btn.setAttribute('aria-label', btn.title);
   btn.classList.add('btn', 'btn-light');
 
   const i = document.createElement('i');
@@ -924,6 +932,7 @@ map.addLayer(vectorLayer);
   btnPrev.classList.add('popover-button', 'popover-button-prev');
   btnPrev.setAttribute('type', 'button');
   btnPrev.title = 'Föregående träff';
+  btnPrev.setAttribute('aria-label', btnPrev.title);
   btnPrev.onclick = function(event) {
     return onClickPageChange(event, -1);
   };
@@ -932,6 +941,7 @@ map.addLayer(vectorLayer);
   btnNext.classList.add('popover-button', 'popover-button-next');
   btnNext.setAttribute('type', 'button');
   btnNext.title = 'Nästa träff';
+  btnNext.setAttribute('aria-label', btnNext.title);
   btnNext.onclick = function(event) {
     return onClickPageChange(event, +1);
   };
@@ -940,6 +950,7 @@ map.addLayer(vectorLayer);
   btnClose.classList.add('popover-button', 'popover-button-close');
   btnClose.setAttribute('type', 'button');
   btnClose.title = 'Stäng';
+  btnClose.setAttribute('aria-label', btnClose.title);
   btnClose.onclick = function(event) {
     featureOverlaySource.clear(true);
     if (popover !== null) {