From 89a736d6f405f7fbb7722fb202d0630429cdebe1 Mon Sep 17 00:00:00 2001
From: AdrianSolberg <adrian@norapps.no>
Date: Wed, 29 Oct 2025 13:36:49 +0100
Subject: [PATCH] fix(#50): make activate buttons not loose focus on click

---
 src/Accessibility/makeMenuTabbable.js | 90 ++++++++++++++-------------
 1 file changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/Accessibility/makeMenuTabbable.js b/src/Accessibility/makeMenuTabbable.js
index 7153559..c969dba 100644
--- a/src/Accessibility/makeMenuTabbable.js
+++ b/src/Accessibility/makeMenuTabbable.js
@@ -13,17 +13,17 @@ 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()
       }
-    });
+    })
   }
 }
 
@@ -31,17 +31,17 @@ function makeMenuToggleTabbable() {
  * 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()
       }
-    });
+    })
   }
 }
 
@@ -49,18 +49,18 @@ function makeMiniMapTabbable() {
  * 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()
       }
-    });
+    })
   }
-}
\ No newline at end of file
+}