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