feat(#50): make appearance panel keyboard accessible

src/Accessibility/makeMenuTabbable.js

@@ -7,6 +7,7 @@ export function makeMenuTabbable() {
   makePanelsTabbable()
   makeElevationControlTabbable()
   makeAcceptedFilteringTabbable()
+  makeAppearancePanelTabbable()
 }
 
 /**
@@ -82,15 +83,15 @@ function makeElevationControlTabbable() {
   }
 
   // Make gradient clamp, repeat and mirrored repeat buttons tabbable and keyboard clickable
-  const gradientRadios = document.querySelectorAll(
+  const gradientButtons = document.querySelectorAll(
     '#gradient_repeat_option label'
   )
-  gradientRadios.forEach((radio) => {
-    radio.tabIndex = 0
-    radio.addEventListener('keydown', (e) => {
+  gradientButtons.forEach((label) => {
+    label.tabIndex = 0
+    label.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault()
-        radio.click()
+        label.click()
       }
     })
   })
@@ -126,3 +127,72 @@ function makeAcceptedFilteringTabbable() {
     })
   }
 }
+
+/**
+ * Makes appearance panel tabbable and keyboard clickable
+ */
+function makeAppearancePanelTabbable() {
+  // Make EDL checkbox tabbable and keyboard clickable
+  const edlCheckbox = document.getElementById('chkEDLEnabled');
+  if (edlCheckbox) {
+    edlCheckbox.tabIndex = 0
+    edlCheckbox.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        edlCheckbox.click();
+      }
+    });
+  }
+
+  // Make background buttons tabbable and keyboard clickable
+  const backgroundButtons = document.querySelectorAll(
+    '#background_options label'
+  )
+  backgroundButtons.forEach((label) => {
+    label.tabIndex = 0
+    label.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        label.click()
+      }
+    })
+  })
+
+  // Make splat quality buttons tabbable and keyboard clickable
+  const splatQualityButtons = document.querySelectorAll(
+    '#splat_quality_options label'
+  )
+  splatQualityButtons.forEach((label) => {
+    label.tabIndex = 0
+    label.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        label.click()
+      }
+    })
+  })
+
+  // Make box checkbox tabbable and keyboard clickable
+  const boxCheckbox = document.getElementById('show_bounding_box');
+  if (boxCheckbox) {
+    boxCheckbox.tabIndex = 0
+    boxCheckbox.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        boxCheckbox.click();
+      }
+    });
+  }
+
+  // Make lock view checkbox tabbable and keyboard clickable
+  const lockViewCheckBox = document.getElementById('set_freeze');
+  if (lockViewCheckBox) {
+    lockViewCheckBox.tabIndex = 0
+    lockViewCheckBox.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        lockViewCheckBox.click();
+      }
+    });
+  }
+}