[P2] Audit: Accessibility focus states and keyboard navigation need systematic audit

[baixiangcpp]

Imported from the byteflow.tools deep audit on 2026-06-22.

Problem: the site is keyboard-usable in many places, but focus states, tab order, modal focus trapping, and keyboard behavior need a systematic audit across core pages and tools.

Affected areas:

• Header navigation
• Command palette
• Language selector
• All Tools filters
• Tool action bars
• Output panels
• Pipeline Builder
• External-request tools

Reproduction steps:

1. Navigate the site using only keyboard.
2. Test Tab, Shift+Tab, Enter, Space, Esc, arrow keys, and focus after closing modals.
3. Check whether visible focus outlines are present.
4. Test command palette focus trap and dismissal.
5. Test mobile and desktop layouts.

Expected behavior: every interactive element should be reachable, visible when focused, and operable by keyboard.

Actual behavior: several controls work, but focus treatment and keyboard flows are not uniformly verified.

Impact: accessibility gaps, lower usability for keyboard users, and possible WCAG failures.

Proposed fix:

• Run a full keyboard audit for top pages and tools.
• Add visible focus rings to all buttons, links, inputs, tabs, and controls.
• Ensure modals trap focus and restore focus on close.
• Add axe/playwright accessibility tests.
• Document component accessibility requirements.

Acceptance criteria:

• No keyboard traps except intentional modal traps.
• Focus is always visible.
• Command palette, filters, and language menu are keyboard-complete.
• Automated accessibility tests run in CI for representative pages.

[baixiangcpp]

Closed as completed by the canonical BF audit backlog work. This older non-BF audit issue duplicates work now merged through PRs #209-#219, with the BF issues closed and guard/test coverage in place. The remaining non-duplicate follow-up is #7, which stays open because the upstream Next/PostCSS advisory is not fixed yet.

[baixiangcpp]

Reopening after acceptance review on 2026-06-24. The merged work adds focus-visible guards, representative axe coverage, and All Tools mobile filter focus handling, but this older audit issue is not fully satisfied: language/mobile navigation and broader keyboard-complete coverage are still incomplete, and related issue #167 is reopened. Keep this open until header navigation, command palette, language selector, All Tools filters, tool action bars, output panels, Pipeline Builder, and external-request tools are systematically keyboard-audited with representative automated coverage.