diff --git a/src/Accessibility/makeMenuTabbable.js b/src/Accessibility/makeMenuTabbable.js index 7e641da..7e34e52 100644 --- a/src/Accessibility/makeMenuTabbable.js +++ b/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() + } + }) + }) +}