Skip to content

Commit

Permalink
fix(#50): 🐛 Selecting a navigation tool with tab should work
Browse files Browse the repository at this point in the history
  • Loading branch information
gautegf committed Nov 3, 2025
1 parent 242443d commit 3a99955
Showing 1 changed file with 41 additions and 1 deletion.
42 changes: 41 additions & 1 deletion src/Accessibility/makeMenuTabbable.js
Original file line number Diff line number Diff line change
Expand Up @@ -251,18 +251,58 @@ function makeToolsPanelTabbable() {

// Hide camera projection options as they are not supported
const cameraProjection = document.getElementById('camera_projection_options');
cameraProjection.hidden = true
if (cameraProjection) cameraProjection.hidden = true

// Make navigation tools tabbable and keyboard clickable
const navigationTools = document.querySelectorAll(
'#navigation img'
)
const renderArea = document.querySelector('#potree_render_area')
// Keep wrapper focusable as a fallback target (doesn't change tab order elsewhere)
if (renderArea && !renderArea.hasAttribute('tabindex')) {
renderArea.setAttribute('tabindex', '0')
}

navigationTools.forEach((img) => {
img.tabIndex = 0
img.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
img.click()

// Switch controls directly via Potree API, then focus the keyboard input target (canvas)
const pv = window.potreeViewer || window.viewer || null
const target = renderArea
if (pv) {
const src = (img.getAttribute && img.getAttribute('src')) || ''
const title = img.getAttribute && (img.getAttribute('title') || img.getAttribute('data-i18n') || '')
const key = (src + ' ' + title).toLowerCase()

if (key.includes('earth')) {
pv.setControls(pv.earthControls)
} else if (key.includes('heli') || key.includes('helicopter')) {
pv.setControls(pv.fpControls)
if (pv.fpControls) pv.fpControls.lockElevation = true
} else if (key.includes('fps') || key.includes('flight') || key.includes('flight_control')) {
pv.setControls(pv.fpControls)
if (pv.fpControls) pv.fpControls.lockElevation = false
} else if (key.includes('orbit')) {
pv.setControls(pv.orbitControls)
}

const dom = pv && pv.renderer && pv.renderer.domElement
if (dom) {
if (!dom.hasAttribute('tabindex')) dom.setAttribute('tabindex', '-1')
dom.focus()
} else if (target) {
// conservative fallback
if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '0')
target.focus()
}
} else if (target) {
if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '0')
target.focus()
}
}
})
})
Expand Down

0 comments on commit 3a99955

Please sign in to comment.