diff --git a/src/Accessibility/makeMenuTabbable.js b/src/Accessibility/makeMenuTabbable.js new file mode 100644 index 0000000..9279af1 --- /dev/null +++ b/src/Accessibility/makeMenuTabbable.js @@ -0,0 +1,24 @@ +/** + * Makes menu tabbable keyboard accessible. + */ +export function makeMenuTabbable() { + makeMenuToggleTabbable(); +} + +/** + * Makes menu toggle tabbable and adds keyboard event listeners. + */ +function makeMenuToggleTabbable() { + const quickButtonsContainer = document.getElementById('potree_quick_buttons'); + if (!quickButtonsContainer) return; + const toggle = quickButtonsContainer.querySelector('.potree_menu_toggle'); + if (toggle) { + toggle.tabIndex = 0; + toggle.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + toggle.click(); + } + }); + } +} \ No newline at end of file diff --git a/src/potreeViewer.js b/src/potreeViewer.js index ad7a0dc..a6f7bf0 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -1,6 +1,7 @@ import { initAnnotationsPanel } from './AnnotationControl/annotationPanel.js' import { initMeasurementsPanel } from './MeasurementControl/measurementsPanel.js' import { initMiniMap } from './MiniMap/miniMap.js' +import { makeMenuTabbable } from './Accessibility/makeMenuTabbable.js' import { initThreePanels, toggleAcceptedLegend @@ -125,6 +126,8 @@ export async function createPotreeViewer( makeGlobeBackgroundOption() + makeMenuTabbable() + initMeasurementsPanel(viewer) initAnnotationsPanel(viewer) initMiniMap(viewer)