onnxruntime

ce906093 - Fix keyboard navigation accessibility for DocFX tab controls (#25819)

Fix keyboard navigation accessibility for DocFX tab controls (#25819) The DocFX tab controls on onnxruntime.ai were not accessible via keyboard navigation, violating MAS 2.1.1 keyboard accessibility requirements. Users could not navigate between language tabs (Python, C#, Java, JavaScript, C++) using keyboard-only input. ## Problem The existing implementation in `docfx.js` only handled mouse click events but lacked keyboard event handlers. This prevented keyboard users from: - Navigating between tabs using arrow keys - Activating tabs using Enter/Space keys - Jumping to first/last tabs using Home/End keys ## Solution Added comprehensive keyboard navigation support following the WAI-ARIA tabs design pattern: ```javascript // Added keyboard event listener alongside existing click handler container.addEventListener('keydown', function (event) { return handleKeyDown(event, state); }); ``` The `handleKeyDown` function implements: - **Arrow key navigation**: Left/Right and Up/Down keys move focus between tabs with wrapping - **Tab activation**: Enter and Space keys activate the focused tab - **Quick navigation**: Home/End keys jump to first/last tabs - **Proper focus management**: Only the active tab has `tabIndex="0"`, others have `tabIndex="-1"` - **Event handling**: `preventDefault()` and `stopPropagation()` for handled keys ## Accessibility Features - Follows WAI-ARIA tabs pattern specifications - Maintains proper ARIA attributes (`role="tab"`, `aria-selected`, etc.) - Provides visual focus indicators via existing CSS - Supports both horizontal and vertical arrow key navigation - Implements circular navigation (wrapping at boundaries) ## Testing Validated functionality with comprehensive keyboard navigation tests: - ✅ Arrow keys navigate between tabs with proper wrapping - ✅ Enter/Space keys activate focused tabs and switch content panels - ✅ Home/End keys jump to first/last tabs correctly - ✅ Focus management works with proper `tabIndex` handling - ✅ Visual feedback shows focused vs selected tab states This ensures keyboard users can fully access all tab functionality without requiring mouse interaction. Fixes #24997. <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: MaanavD <24942306+MaanavD@users.noreply.github.com>