mirror of
https://github.com/supabase/supabase.git
synced 2026-07-19 13:56:47 -04:00
Gildas Garcia
26b1fd9aab
## Problem Keyboard navigation on docs tabs is confusing: - tab panels can be focused but without any indication that they are - code example buttons can be focused with keyboard but stay invisible - copy code button has no label and do not notify screen reader users about its status ## Solution - Make tab panels non focusable - Ensure buttons are visible when focused - Add a label to the copy code buttons - Add a live region for the copy code status ## How to test 1. Go to https://docs-git-gildasgarcia-docs-1156-cannot-keyboard-140a35-supabase.vercel.app/docs/guides/local-development/cli/getting-started 2. Go to a tab list with _Tab_ key 3. Verify you can choose the tab value with Arrow keys and select it with space 4. Tab again and verify you now have focused the code example first button and it is visible 5. Tab again and the copy code button should be focused and visible If you enable Voice over, clicking the copy code button should announce that the code has been copied <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **Bug Fixes** * Improved code block copy feedback so the “copied” state resets more reliably after interaction. * **Accessibility Improvements** * Code block controls now appear on keyboard focus (not just hover) and include an assistive live announcement when copying succeeds. * Enhanced code block semantics with clearer ARIA labeling. * Prevented tab panels from being reachable through normal tab navigation to reduce unintended focus stops. <!-- end of auto-generated comment: release notes by coderabbit.ai -->