Files
supabase/apps/design-system/config/docs.ts
Danny White 37dded67d1 feat: unify SkipToContent across studio, docs, www, and design-system (#48314)
## 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 -->
2026-07-29 06:21:50 +10:00

559 lines
13 KiB
TypeScript

import { MainNavItem, SidebarNavItem } from '@/types/nav'
interface DocsConfig {
mainNav?: MainNavItem[]
sidebarNav: SidebarNavItem[]
}
export const docsConfig: DocsConfig = {
sidebarNav: [
{
title: 'Getting Started',
sortOrder: 'alphabetical',
items: [
{
title: 'Introduction',
href: '/docs',
priority: true,
items: [],
},
{
title: 'Accessibility',
href: '/docs/accessibility',
items: [],
},
{
title: 'Color Usage',
href: '/docs/color-usage',
items: [],
},
{
title: 'Copywriting',
href: '/docs/copywriting',
items: [],
},
{
title: 'Icons',
href: '/docs/icons',
items: [],
},
{
title: 'Tailwind Classes',
href: '/docs/tailwind-classes',
items: [],
},
{
title: 'Theming',
href: '/docs/theming',
items: [],
},
{
title: 'Typography',
href: '/docs/typography',
items: [],
},
],
},
{
title: 'UI Patterns',
sortOrder: 'alphabetical',
items: [
{
title: 'Introduction',
href: '/docs/ui-patterns/introduction',
items: [],
priority: true,
},
{
title: 'Charts',
href: '/docs/ui-patterns/charts',
items: [],
},
{
title: 'Connect Interstitials',
href: '/docs/ui-patterns/connect-interstitials',
items: [],
},
{
title: 'Empty States',
href: '/docs/ui-patterns/empty-states',
items: [],
},
{
title: 'Forms',
href: '/docs/ui-patterns/forms',
items: [],
},
{
title: 'Layout',
href: '/docs/ui-patterns/layout',
items: [],
},
{
title: 'Markdown',
href: '/docs/ui-patterns/markdown',
items: [],
},
{
title: 'Modality',
href: '/docs/ui-patterns/modality',
items: [],
},
{
title: 'Navigation',
href: '/docs/ui-patterns/navigation',
items: [],
},
{
title: 'Tables',
href: '/docs/ui-patterns/tables',
items: [],
},
],
},
{
title: 'Fragment Components',
sortOrder: 'alphabetical',
items: [
{
title: 'Introduction',
href: '/docs/fragments/introduction',
items: [],
priority: true,
},
{
title: 'Admonition',
href: '/docs/fragments/admonition',
items: [],
},
{
title: 'Collapsible Alert',
href: '/docs/fragments/collapsible-alert',
items: [],
},
{
title: 'Collapsible Card Section',
href: '/docs/fragments/collapsible-card-section',
items: [],
},
{
title: 'Assistant Chat',
href: '/docs/fragments/assistant-chat',
items: [],
},
{
title: 'Empty State Presentational',
href: '/docs/fragments/empty-state-presentational',
items: [],
},
{
title: 'Page Container',
href: '/docs/fragments/page-container',
items: [],
},
{
title: 'Page Breadcrumbs',
href: '/docs/fragments/page-breadcrumbs',
items: [],
},
{
title: 'Page Nav',
href: '/docs/fragments/page-nav',
items: [],
},
{
title: 'Page Header',
href: '/docs/fragments/page-header',
items: [],
},
{
title: 'Page Section',
href: '/docs/fragments/page-section',
items: [],
},
{
title: 'Text Confirm Dialog',
href: '/docs/fragments/text-confirm-dialog',
items: [],
},
{
title: 'Info Tooltip',
href: '/docs/fragments/info-tooltip',
items: [],
},
{
title: 'Inner Side Menu',
href: '/docs/fragments/inner-side-menu',
items: [],
},
{
title: 'Data Input',
href: '/docs/fragments/data-input',
items: [],
},
{
title: 'Error Display',
href: '/docs/fragments/error-display',
items: [],
},
{
title: 'Form Item Layout',
href: '/docs/fragments/form-item-layout',
items: [],
},
{
title: 'Multi Select',
href: '/docs/fragments/multi-select',
items: [],
},
{
title: 'Filter Bar',
href: '/docs/fragments/filter-bar',
items: [],
},
{
title: 'Logs Bar Chart',
href: '/docs/fragments/logs-bar-chart',
items: [],
},
{
title: 'Metric Card',
href: '/docs/fragments/metric-card',
items: [],
},
{
title: 'Table of Contents (TOC)',
href: '/docs/fragments/toc',
items: [],
},
{
title: 'Confirmation Modal',
href: '/docs/fragments/confirmation-modal',
items: [],
},
{
title: 'Status Codes',
href: '/docs/fragments/status-codes',
items: [],
},
{
title: 'Key/Value Field Array',
href: '/docs/fragments/key-value-field-array',
items: [],
},
{
title: 'Single Value Field Array',
href: '/docs/fragments/single-value-field-array',
items: [],
},
{
title: 'Skip to Content',
href: '/docs/fragments/skip-to-content',
items: [],
},
],
},
{
title: 'Atom Components',
sortOrder: 'alphabetical',
items: [
{
title: 'Introduction',
href: '/docs/components/introduction',
items: [],
priority: true,
},
{
title: 'Accordion',
href: '/docs/components/accordion',
items: [],
},
{
title: 'Alert',
href: '/docs/components/alert',
items: [],
},
{
title: 'Alert Dialog',
href: '/docs/components/alert-dialog',
items: [],
},
{
title: 'Aspect Ratio',
href: '/docs/components/aspect-ratio',
items: [],
},
{
title: 'Avatar',
href: '/docs/components/avatar',
items: [],
},
{
title: 'Badge',
href: '/docs/components/badge',
items: [],
},
{
title: 'Breadcrumb',
href: '/docs/components/breadcrumb',
items: [],
label: 'New',
},
{
title: 'Button',
href: '/docs/components/button',
items: [],
},
{
title: 'Calendar',
href: '/docs/components/calendar',
items: [],
},
{
title: 'Card',
href: '/docs/components/card',
items: [],
},
{
title: 'Carousel',
href: '/docs/components/carousel',
items: [],
},
{
title: 'Checkbox',
href: '/docs/components/checkbox',
items: [],
},
{
title: 'Collapsible',
href: '/docs/components/collapsible',
items: [],
},
{
title: 'Combobox',
href: '/docs/components/combobox',
items: [],
},
{
title: 'Command',
href: '/docs/components/command',
items: [],
},
{
title: 'Command Menu (cmdk)',
href: '/docs/components/commandmenu',
items: [],
},
{
title: 'Context Menu',
href: '/docs/components/context-menu',
items: [],
},
{
title: 'Date Picker',
href: '/docs/components/date-picker',
items: [],
},
{
title: 'Dialog',
href: '/docs/components/dialog',
items: [],
},
{
title: 'Drawer',
href: '/docs/components/drawer',
items: [],
},
{
title: 'Dropdown Menu',
href: '/docs/components/dropdown-menu',
items: [],
},
{
title: 'Field',
href: '/docs/components/field',
items: [],
},
{
title: 'Form',
href: '/docs/components/form',
items: [],
},
{
title: 'Hover Card',
href: '/docs/components/hover-card',
items: [],
},
{
title: 'Input',
href: '/docs/components/input',
items: [],
},
{
title: 'Input OTP',
href: '/docs/components/input-otp',
items: [],
label: 'New',
},
{
title: 'Label',
href: '/docs/components/label',
items: [],
},
{
title: 'Mermaid',
href: '/docs/components/mermaid',
items: [],
label: 'New',
},
{
title: 'Menubar',
href: '/docs/components/menubar',
items: [],
},
{
title: 'Nav Menu',
href: '/docs/components/nav-menu',
items: [],
},
{
title: 'Navigation Menu',
href: '/docs/components/navigation-menu',
items: [],
},
{
title: 'Pagination',
href: '/docs/components/pagination',
items: [],
},
{
title: 'Popover',
href: '/docs/components/popover',
items: [],
},
{
title: 'Progress',
href: '/docs/components/progress',
items: [],
},
{
title: 'Radio Group',
href: '/docs/components/radio-group',
items: [],
},
{
title: 'Radio Group Stacked',
href: '/docs/components/radio-group-stacked',
items: [],
},
{
title: 'Radio Group Card',
href: '/docs/components/radio-group-card',
items: [],
},
{
title: 'Resizable',
href: '/docs/components/resizable',
items: [],
},
{
title: 'Scroll Area',
href: '/docs/components/scroll-area',
items: [],
},
{
title: 'Select',
href: '/docs/components/select',
items: [],
},
{
title: 'Separator',
href: '/docs/components/separator',
items: [],
},
{
title: 'Sheet',
href: '/docs/components/sheet',
items: [],
},
{
title: 'Skeleton',
href: '/docs/components/skeleton',
items: [],
},
{
title: 'Slider',
href: '/docs/components/slider',
items: [],
},
{
title: 'Sidebar',
href: '/docs/components/sidebar',
items: [],
},
{
title: 'Sonner',
href: '/docs/components/sonner',
items: [],
},
{
title: 'Success Check',
href: '/docs/components/success-check',
items: [],
},
{
title: 'Switch',
href: '/docs/components/switch',
items: [],
},
{
title: 'Table',
href: '/docs/components/table',
items: [],
},
{
title: 'Tabs',
href: '/docs/components/tabs',
items: [],
},
{
title: 'Textarea',
href: '/docs/components/textarea',
items: [],
},
{
title: 'Toggle',
href: '/docs/components/toggle',
items: [],
},
{
title: 'Toggle Group',
href: '/docs/components/toggle-group',
items: [],
},
{
title: 'Tooltip',
href: '/docs/components/tooltip',
items: [],
},
{
title: 'Tree View',
href: '/docs/components/tree-view',
items: [],
},
{
title: 'Expanding Textarea',
href: '/docs/components/expanding-textarea',
items: [],
},
{
title: 'Keyboard Shortcut',
href: '/docs/components/keyboard-shortcut',
items: [],
},
],
},
],
}