feat(#50): make elevation panel keyboard accessible

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()

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();
+      }
+    });
+  });
 }