fix(#50): make activate buttons not loose focus on click

src/Accessibility/makeMenuTabbable.js

@@ -13,54 +13,54 @@ export function makeMenuTabbable() {
  * Makes menu toggle tabbable and adds keyboard event listeners.
  */
 function makeMenuToggleTabbable() {
-  const quickButtonsContainer = document.getElementById('potree_quick_buttons');
-  if (!quickButtonsContainer) return;
-  const toggle = quickButtonsContainer.querySelector('.potree_menu_toggle');
+  const quickButtonsContainer = document.getElementById('potree_quick_buttons')
+  if (!quickButtonsContainer) return
+  const toggle = quickButtonsContainer.querySelector('.potree_menu_toggle')
   if (toggle) {
-    toggle.tabIndex = 0;
+    toggle.tabIndex = 0
     toggle.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        toggle.click();
+        e.preventDefault()
+        toggle.click()
       }
-    });
+    })
   }
 }
 
 /**
  * Makes minimap tabbable and keyboard clickable
  */
 function makeMiniMapTabbable() {
-  const quickButtonsContainer = document.getElementById('potree_quick_buttons');
-  if (!quickButtonsContainer) return;
-  const toggle = quickButtonsContainer.querySelector('#potree_map_toggle');
+  const quickButtonsContainer = document.getElementById('potree_quick_buttons')
+  if (!quickButtonsContainer) return
+  const toggle = quickButtonsContainer.querySelector('#potree_map_toggle')
   if (toggle) {
-    toggle.tabIndex = 0;
+    toggle.tabIndex = 0
     toggle.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        toggle.click();
+        e.preventDefault()
+        toggle.click()
       }
-    });
+    })
   }
 }
 
 /**
  * Makes accordion titles tabbable and keyboard clickable
  */
 function makePanelsTabbable() {
-  const menu = document.getElementById('potree_menu');
+  const menu = document.getElementById('potree_menu')
   if (menu) {
-    const headers = menu.querySelectorAll('h3');
+    const headers = menu.querySelectorAll('h3')
     headers.forEach((header) => {
-      header.tabIndex = 0;
+      header.tabIndex = 0
       header.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          header.click();
+          e.preventDefault()
+          header.click()
         }
-      });
-    });
+      })
+    })
   }
 }
 
@@ -71,38 +71,43 @@ function makeElevationControlTabbable() {
   // Make activate elevation control button tabbable and keyboard clickable
   const activateButton = document.getElementById('btnDoElevationControl')
   if (activateButton) {
-    activateButton.tabIndex = 0;
+    activateButton.tabIndex = 0
     activateButton.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        activateButton.click();
+        e.preventDefault()
+        activateButton.click()
+        activateButton.focus()
       }
-    });
+    })
   }
 
   // Make gradient clamp, repeat and mirrored repeat buttons tabbable and keyboard clickable
-  const gradientRadios = document.querySelectorAll('#gradient_repeat_option label');
+  const gradientRadios = document.querySelectorAll(
+    '#gradient_repeat_option label'
+  )
   gradientRadios.forEach((radio) => {
-    radio.tabIndex = 0;
+    radio.tabIndex = 0
     radio.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        radio.click();
+        e.preventDefault()
+        radio.click()
       }
-    });
-  });
+    })
+  })
 
   // Make gradient schemes tabbable and keyboard clickable
-  const gradientSpans = document.querySelectorAll('#elevation_gradient_scheme_selection span');
+  const gradientSpans = document.querySelectorAll(
+    '#elevation_gradient_scheme_selection span'
+  )
   gradientSpans.forEach((span) => {
-    span.tabIndex = 0;
+    span.tabIndex = 0
     span.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        span.click();
+        e.preventDefault()
+        span.click()
       }
-    });
-  });
+    })
+  })
 }
 
 /**
@@ -111,12 +116,13 @@ function makeElevationControlTabbable() {
 function makeAcceptedFilteringTabbable() {
   const activateButton = document.getElementById('doAcceptedFiltering')
   if (activateButton) {
-    activateButton.tabIndex = 0;
+    activateButton.tabIndex = 0
     activateButton.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        activateButton.click();
+        e.preventDefault()
+        activateButton.click()
+        activateButton.focus()
       }
-    });
+    })
   }
-}
+}