mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
37dded67d1
## What kind of change does this PR introduce? Feature / a11y polish ## What is the current behavior? Studio and Docs each had their own skip-to-content link (different styling and behaviour). www and design-system had none. ## What is the new behavior? Shared `SkipToContent` in `ui-patterns`, adopted by Studio, Docs, www, and design-system. Documented as a fragment with a short note under Accessibility → Jumping ahead. Tab once to reveal the button (top-left), Enter to jump to a content-only `<main>`. | After | | --- | | <img width="836" height="324" alt="CleanShot 2026-07-24 at 14 08 47@2x" src="https://github.com/user-attachments/assets/6df29452-e53a-4eca-8f64-946f2b9f605d" /> | ## To test Shared steps for every app: enable Tab key navigation if needed, load the preview, press **Tab** once — skip button should slide in top-left. Press **Enter** — focus jumps to main content (no blue ring on `<main>`). Press **Tab** again — first interactive control in the page body, not the sidebar/nav. Hover the skip button — solid fill, clear hover state, no chrome showing through. - **Studio** — [preview](https://studio-staging-git-dnywh-featskip-to-content-supabase.vercel.app) → sign in → any project page - **Docs** — [preview](https://docs-git-dnywh-featskip-to-content-supabase.vercel.app) → any docs page with sidebar - **www** — [preview](https://zone-www-dot-com-git-dnywh-featskip-to-content-supabase.vercel.app) → homepage or any marketing page with the default nav - **Design system** — [preview](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app) → any docs page (confirm Tab from content does **not** walk the sidebar), plus [Skip to Content fragment](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app/docs/fragments/skip-to-content) ## Additional context Follow-up to #47694 / #48303 (Studio) and #47515 (Docs). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a reusable “Skip to content” accessibility link across key layouts and pages. - Updated main landmarks to support keyboard focus and skip-link navigation (`id="main"`). - **Accessibility** - Skip links now follow consistent landmark-target conventions and remain hidden until focused. - Improved documentation for skip links/jump shortcuts in persistent chrome layouts. - **Documentation** - Added a dedicated Skip to Content fragment, navigation entry, and expanded accessibility guidance. - Updated button description wording in component docs. - **Tests** - Added component tests for SkipToContent. - **Chores** - Exposed SkipToContent via additional public package entry points. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
38 lines
1.7 KiB
Plaintext
38 lines
1.7 KiB
Plaintext
---
|
|
title: Navigation
|
|
description: Navigation patterns help users understand where they are and where they can go next.
|
|
---
|
|
|
|
Supabase has a necessarily complex navigation system to handle multiple products and levels of hierarchy. This page introduces those general patterns, best practices, and the components involved.
|
|
|
|
## Components
|
|
|
|
### [Nav Menu](../components/nav-menu)
|
|
|
|
A horizontal list of related views within a consistent PageLayout context, allowing for clearer page-level organisation. Activating a NavMenu item should trigger a URL change.
|
|
|
|
### [Skip To Content](../fragments/skip-to-content)
|
|
|
|
Keyboard-accessible skip link for apps with persistent header and sidebar chrome. Hidden until focused via Tab, then slides into view so users can jump past navigation to the main landmark. See [Accessibility](../accessibility#jumping-ahead) for broader context.
|
|
|
|
## Page titles
|
|
|
|
Browser page titles should follow a consistent most-specific-first structure so tabs and browser history are easier to scan:
|
|
|
|
`Entity | Section | Surface | Project | Org | Supabase`
|
|
|
|
Examples:
|
|
|
|
- `users | Table Editor | My Project | My Org | Supabase`
|
|
- `Backups | Database | My Project | My Org | Supabase`
|
|
|
|
Implementation notes (Studio):
|
|
|
|
- Use the shared title formatter in `apps/studio/lib/page-title.ts`
|
|
- Prefer `ProjectLayout` for project-scoped pages
|
|
- Prefer a layout's explicit `title` prop when a wrapper layout exposes one
|
|
- Use `browserTitle.section` when rendering `ProjectLayout` directly
|
|
- Use `browserTitle.entity` for the most specific resource (table/function/query) when available
|
|
- Use `product` as the single source of truth for the project-level surface segment
|
|
- Avoid assembling `document.title` ad hoc in individual pages/layouts
|