feat(#50): make tools panel keyboard accessible

src/Accessibility/makeMenuTabbable.js

@@ -8,6 +8,7 @@ export function makeMenuTabbable() {
   makeElevationControlTabbable()
   makeAcceptedFilteringTabbable()
   makeAppearancePanelTabbable()
+  makeToolsPanelTabbable()
 }
 
 /**
@@ -196,3 +197,73 @@ function makeAppearancePanelTabbable() {
     });
   }
 }
+
+/**
+ * Makes tools panel tabbable and keyboard clickable
+ */
+function makeToolsPanelTabbable() {
+  // Make clipping tools tabbable and keyboard clickable
+  const clippingTools = document.querySelectorAll(
+    '#clipping_tools img'
+  )
+  clippingTools.forEach((img, index) => {
+    // Hide unsupported tool
+    if (index === 2) {
+      img.hidden = true
+      return
+    }
+    img.tabIndex = 0
+    img.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        img.click()
+      }
+    })
+  })
+
+  // Make clip task buttons tabbable and keyboard clickable
+  const clipTaskButtons = document.querySelectorAll(
+    '#cliptask_options label'
+  )
+  clipTaskButtons.forEach((label) => {
+    label.tabIndex = 0
+    label.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        label.click()
+      }
+    })
+  })
+
+  // Make clip method buttons tabbable and keyboard clickable
+  const clipMethodButtons = document.querySelectorAll(
+    '#clipmethod_options label'
+  )
+  clipMethodButtons.forEach((label) => {
+    label.tabIndex = 0
+    label.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        label.click()
+      }
+    })
+  })
+
+  // Hide camera projection options as they are not supported
+  const cameraProjection = document.getElementById('camera_projection_options');
+  cameraProjection.hidden = true
+
+  // Make navigation tools tabbable and keyboard clickable
+  const navigationTools = document.querySelectorAll(
+    '#navigation img'
+  )
+  navigationTools.forEach((img) => {
+    img.tabIndex = 0
+    img.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        img.click()
+      }
+    })
+  })
+}