Consolidate UI constants and add accessibility labels

[veillette]

Summary

This PR consolidates repeated UI constants into centralized locations and adds comprehensive accessibility labels throughout the application. It improves code maintainability by eliminating duplication and enhances accessibility for screen reader users.

Key Changes

Constants Consolidation

• TrackLabConstants.ts: Added new shared constants for overlay interactions and control panels:

  • CONTROL_ICON_SIZE (20px) — replaces local ICON_SIZE definitions
  • CONTROL_PANEL_ROWS_SPACING, CONTROL_PANEL_X_MARGIN, CONTROL_PANEL_Y_MARGIN — shared panel layout
  • OVERLAY_DRAG_SPEED, OVERLAY_SHIFT_DRAG_SPEED — keyboard drag speeds for all draggable overlays
  • LABEL_PANEL_* — label panel styling (corner radius, margins, scale)
  • OVERLAY_TOUCH_DILATION — touch target expansion for overlay endpoints

• InfoDialogNode.ts, ControlPanel.ts, MeasurementToolsPanel.ts: Replaced local icon size and layout constants with imports from TrackLabConstants.ts

• Icon geometry constants: Extracted repeated icon dimension calculations into named constants (e.g., ICON_ORIGIN_FRACTION, ICON_ARROW_HEAD_SIZE, ICON_DOT_RADIUS) for better readability and maintainability

Color Consolidation

• TrackLabColors.ts: Added new color properties for overlays and tools:

  • measuringTapeColorProperty, measuringTapeShadowProperty
  • angleToolColorProperty, angleToolShadowProperty
  • overlayHandleOutlineProperty — shared outline color for all overlay endpoints
  • iconShadowProperty — shadow color for measurement tool panel icons
  • calibrationWarningColorProperty — warning color for overlapping calibration endpoints

• Replaced hardcoded color strings (e.g., "rgb(240, 185, 55)", "rgba(0, 0, 0, 0.65)") with color property references throughout view files

Accessibility Enhancements

• String additions (strings_en.json, strings_fr.json): Added 23 new a11y strings for:

  • Overlay endpoint labels (measuring tape base/tip, angle tool vertex/arms)
  • Control panel toggles (axes, calibration, magnifier, auto-tracking, measuring tape, angle tool)
  • Graph controls (rescale, zoom in/out, pan directions)
  • Graph container labels

• StringManager.ts: Extended getA11y() return type with new string properties

• View files: Added accessibleName properties to interactive elements:

  • ControlPanel.ts: Checkbox rows now have accessible names
  • MeasurementToolsPanel.ts: Checkbox rows now have accessible names
  • AngleToolNode.ts: Vertex and arm endpoints have accessible names
  • MeasuringTapeNode.ts: Endpoint handles have accessible names
  • ConfigurableGraph.ts: Graph buttons (rescale, zoom, pan) have accessible names
  • KinematicsGraphNode.ts: Graph container has accessible name

Code Quality Improvements

• Removed unused import (Color from CalibrationToolNode.ts)
• Improved code formatting and consistency across icon definition functions
• Updated CLAUDE.md with guidelines for constants and colors
• Fixed whitespace issues in bouncingBallToSVG.ts

Implementation Details

• All color properties use the existing profileColor() function for automatic dark/light theme support
• Icon layout fractions (0.5, 0.7, etc.) are now named constants, making icon geometry more understandable
• Accessibility strings are retrieved from StringManager.getInstance().getA11y() and passed to components
• Constants are organized by category with clear section comments for maintainability

https://claude.ai/code/session_01QY96Kv94K89iT4fHoUbSLi