From ed883b36c35c7f7a9b604d0103eab35b52123a1d Mon Sep 17 00:00:00 2001
From: AdrianSolberg <adrian@norapps.no>
Date: Wed, 29 Oct 2025 13:27:22 +0100
Subject: [PATCH] feat(#50): make elevation panel keyboard accessible

---
 src/AcceptedFiltering/threePanels.js  |  4 +--
 src/Accessibility/makeMenuTabbable.js | 42 +++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js
index 249df0f..25de910 100644
--- a/src/AcceptedFiltering/threePanels.js
+++ b/src/AcceptedFiltering/threePanels.js
@@ -204,11 +204,11 @@ function setUpElevationSlider(hooks) {
   const update = () => {
     const low = slider.slider('values', 0)
     const high = slider.slider('values', 1)
-    label.textContent = `${low.toFixed(2)} to ${high.toFixed(2)}`
+    label.textContent = `${Math.round(low)} to ${Math.round(high)}`
     hooks?.onElevationRangeChange([low, high])
   }
 
-  slider.slider({ min: -10000, max: 0, values: [-10000, 0] })
+  slider.slider({ min: -10000, max: 0, values: [-10000, 0], step: 1 })
   slider.off('slide.custom slidestop.custom change.custom')
   slider.on('slide.custom slidestop.custom change.custom', update)
   update()
diff --git a/src/Accessibility/makeMenuTabbable.js b/src/Accessibility/makeMenuTabbable.js
index 79502e5..b019647 100644
--- a/src/Accessibility/makeMenuTabbable.js
+++ b/src/Accessibility/makeMenuTabbable.js
@@ -5,6 +5,7 @@ export function makeMenuTabbable() {
   makeMenuToggleTabbable()
   makeMiniMapTabbable()
   makePanelsTabbable()
+  makeElevationControlTabbable()
 }
 
 /**
@@ -60,4 +61,45 @@ function makePanelsTabbable() {
       });
     });
   }
+}
+
+/**
+ * Makes elevation control panel tabbable and keyboard clickable
+ */
+function makeElevationControlTabbable() {
+  // Make activate elevation control button tabbable and keyboard clickable
+  const activateButton = document.getElementById('btnDoElevationControl')
+  if (activateButton) {
+    activateButton.tabIndex = 0;
+    activateButton.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        activateButton.click();
+      }
+    });
+  }
+
+  // Make gradient clamp, repeat and mirrored repeat buttons tabbable and keyboard clickable
+  const gradientRadios = document.querySelectorAll('#gradient_repeat_option label');
+  gradientRadios.forEach((radio) => {
+    radio.tabIndex = 0;
+    radio.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        radio.click();
+      }
+    });
+  });
+
+  // Make gradient schemes tabbable and keyboard clickable
+  const gradientSpans = document.querySelectorAll('#elevation_gradient_scheme_selection span');
+  gradientSpans.forEach((span) => {
+    span.tabIndex = 0;
+    span.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        span.click();
+      }
+    });
+  });
 }
\ No newline at end of file