mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 19:08:44 +08:00
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 -->
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import 'ui-patterns/ShimmeringLoader/index.css'
|
|
import '../styles/globals.css'
|
|
import '../styles/prism-okaidia.css'
|
|
|
|
import { GlobalProviders } from '~/features/app.providers'
|
|
import { DOCS_CONTENT_CONTAINER_ID } from '~/features/ui/helpers.constants'
|
|
import { TopNavSkeleton } from '~/layouts/MainSkeleton'
|
|
import { BASE_PATH, IS_PRODUCTION } from '~/lib/constants'
|
|
import { getCustomContent } from '~/lib/custom-content/getCustomContent'
|
|
import { TelemetryTagManager } from 'common'
|
|
import { genFaviconData } from 'common/MetaFavicons/app-router'
|
|
import type { Metadata, Viewport } from 'next'
|
|
import { SkipToContent } from 'ui-patterns/SkipToContent'
|
|
|
|
import { inter, manrope } from '@/fonts'
|
|
|
|
const { metadataApplicationName, metadataTitle } = getCustomContent([
|
|
'metadata:application_name',
|
|
'metadata:title',
|
|
])
|
|
|
|
const metadata: Metadata = {
|
|
applicationName: metadataApplicationName,
|
|
title: metadataTitle,
|
|
description:
|
|
'Supabase is the Postgres development platform providing all the backend features you need to build a product.',
|
|
metadataBase: new URL('https://supabase.com'),
|
|
icons: genFaviconData(BASE_PATH),
|
|
robots: {
|
|
index: IS_PRODUCTION,
|
|
follow: IS_PRODUCTION,
|
|
},
|
|
openGraph: {
|
|
type: 'article',
|
|
authors: 'Supabase',
|
|
url: `${BASE_PATH}`,
|
|
images: `${BASE_PATH}/img/supabase-og-image.png`,
|
|
publishedTime: new Date().toISOString(),
|
|
modifiedTime: new Date().toISOString(),
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
site: '@supabase',
|
|
creator: '@supabase',
|
|
images: `${BASE_PATH}/img/supabase-og-image.png`,
|
|
},
|
|
}
|
|
|
|
const viewport: Viewport = {
|
|
themeColor: '#1E1E1E',
|
|
}
|
|
|
|
const RootLayout = ({ children }: { children: React.ReactNode }) => {
|
|
return (
|
|
<html lang="en" className={`${manrope.variable} ${inter.variable}`} suppressHydrationWarning>
|
|
<body>
|
|
<SkipToContent href={`#${DOCS_CONTENT_CONTAINER_ID}`} />
|
|
<TelemetryTagManager />
|
|
<GlobalProviders>
|
|
<TopNavSkeleton>{children}</TopNavSkeleton>
|
|
</GlobalProviders>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
|
|
export { metadata, viewport }
|
|
export default RootLayout
|