50 make navigation controls tabbable for accessibility

[gautegf]

Issue number

Closes #50

Description

Make it possible to navigate the side bar with tabbing

PS: Its not perfect, some stuff are still not tabbable, but had some issues and don't have more time to fix it

Testing steps

Tab through the sidebar!

Summary by CodeRabbit

Release Notes

• New Features

  • Added comprehensive keyboard accessibility enhancements for menu navigation and controls across all UI panels and tools.

• Improvements

  • Elevation values now display as whole numbers for improved readability.
  • Enhanced globe visibility logic based on camera position and active control mode.
  • Removed language information header from sidebar.

[coderabbit]

Walkthrough

A new keyboard accessibility module for UI menus is introduced alongside integration updates. Elevation slider behavior is refined with integer rounding and discrete steps. Camera sync logic is updated to consider control types and elevation for globe visibility. Minor housekeeping includes header removal and whitespace cleanup.

Changes

Cohort / File(s)	Summary
Keyboard Accessibility Framework src/Accessibility/makeMenuTabbable.js	New module providing comprehensive keyboard navigation enhancements; exports makeMenuTabbable() API that orchestrates helpers for menu toggles, panels, tools, scene navigation, and Potree viewer control integration using tabIndex binding, keydown handlers, and mutation observers
Elevation Slider Refinement src/Filter/filter.js	Elevation range labels now round to integers instead of two decimals; slider step constraint added (step: 1) for discrete integer increments from -10000 to 0
Viewer Integration & Camera Logic src/potreeViewer.js, src/cameraSync.js	potreeViewer.js: imports and invokes makeMenuTabbable() after GUI setup; removes sidebar header DOM element; cameraSync.js: refactors shouldShowGlobe() to branch globe visibility logic based on Potree control type (orbit vs. non-orbit) and camera elevation
Minor Maintenance src/main.js	Removes blank line between POTREE_SETTINGS and event listener attachment

Sequence Diagram

sequenceDiagram
    participant Init as Potree Init
    participant MAT as makeMenuTabbable()
    participant DOM as UI Elements
    participant User as User (Keyboard)
    participant PV as Potree Viewer
    
    Init->>MAT: Call after GUI setup
    activate MAT
    MAT->>DOM: Set tabIndex on components
    MAT->>DOM: Attach keydown handlers (Enter/Space)
    MAT->>DOM: Setup mutation observers
    MAT->>DOM: Coordinate focus targets
    deactivate MAT
    
    User->>DOM: Press Tab/Enter/Arrow Keys
    activate DOM
    DOM->>DOM: Trigger keyboard handlers
    alt Menu/Panel Navigation
        DOM->>DOM: Update focus or click element
    else Tools/Scene Interaction
        DOM->>PV: Switch control mode or focus
        PV->>PV: Update Potree viewer state
    end
    deactivate DOM
    DOM-->>User: Visual feedback

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• src/Accessibility/makeMenuTabbable.js: New, high-logic-density module with many interdependent helpers covering menu, panels, tools, navigation, and Potree viewer integration; requires careful review of focus management, event binding patterns, and mutation observer lifecycle.
• src/cameraSync.js: Logic refactoring in shouldShowGlobe() with branching based on control type; verify correctness of orbit vs. non-orbit conditions and elevation calculations.
• Integration points in src/potreeViewer.js: Verify proper call placement and timing of makeMenuTabbable() relative to GUI initialization; confirm header removal doesn't break dependent functionality.

Poem

🐰 Tabs and arrows now dance with care,
Menus leap through keyboard air!
From menu to scene, a path so clear,
Accessibility spreads far and near 🎹✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 9f67143 and ac23d5a.

📒 Files selected for processing (5)

• src/Accessibility/makeMenuTabbable.js (1 hunks)
• src/Filter/filter.js (1 hunks)
• src/cameraSync.js (2 hunks)
• src/main.js (0 hunks)
• src/potreeViewer.js (3 hunks)

💤 Files with no reviewable changes (1)

• src/main.js

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[kleinc]

LGTM!

[franmagn]

LGTM