## 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 -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
* feat(code-block): add word wrap functionality and controls to code blocks
* feat(code-block): enhance layout of code block with improved line number display and structure
* fix h-full issue
* fix Prettier issue
---------
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Gildas Garcia