mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Miranda LimonczenkoandCursor
4f05124ce7
https://github.com/user-attachments/assets/30438e3c-b9aa-411b-be38-3fdcd50f7dc6 Closes DOCS-92 ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## Problem Screenreaders have to navigate our main menu on every page. This comes from a very old request. 2024. 😱 ## Solution A 'Skip to Content' button is standard a11y practice. This PR improves keyboard navigation by letting users bypass the top nav and sidebar to jump directly to main content. ## Tophatting 1. Go to any page in our docs. Try a sample of different layouts. 2. Use TAB to navigate. See 'Skip to Content' appear. **Note:** You may need to SHIFT + TAB if your keyboard focus is past the main navigation. Mouse clicks can shift focus. 3. Press ENTER. 4. Continue to TAB and see the next links focused are in the main body. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a “skip to content” button in the docs to improve keyboard navigation. * **Accessibility / UX** * Made the main content area programmatically focusable and adjusted scroll positioning for smoother jumps. * **Style** * Removed the prior global skip-link styles in favor of component-based skip-to-content behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
23 lines
558 B
TypeScript
23 lines
558 B
TypeScript
import { DOCS_CONTENT_CONTAINER_ID } from '~/features/ui/helpers.constants'
|
|
import Link from 'next/link'
|
|
import { Button, cn } from 'ui'
|
|
|
|
const SkipToContent = () => {
|
|
return (
|
|
<Button
|
|
size="tiny"
|
|
variant="default"
|
|
asChild
|
|
className={cn(
|
|
'fixed top-0 left-4 z-[100] w-auto',
|
|
'-translate-y-full focus-visible:translate-y-4',
|
|
'transition-transform duration-200 ease-out'
|
|
)}
|
|
>
|
|
<Link href={`#${DOCS_CONTENT_CONTAINER_ID}`}>Skip to content</Link>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export { SkipToContent }
|