mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny White
e57aae3c83
## What kind of change does this PR introduce? Docs update, with supporting `ui` and Studio changes. ## What is the current behaviour? Disabled buttons with tooltips use native `disabled`, which removes them from the tab order. Keyboard users cannot focus the control or read the tooltip explaining why an action is blocked. The design system also lacked guidance on keeping disabled actions discoverable and explaining why they are unavailable. ## What is the new behaviour? - Adds a **Disabled controls** section to the accessibility docs, with live examples for a focusable disabled button and visible page-level context - Adds `focusableWhenDisabled` to `Button`, keeping `disabled` as the semantic state while using `aria-disabled`, retaining keyboard focus, and guarding click handlers - Updates Studio's `ButtonTooltip` to make disabled buttons with tooltip text focusable automatically Also includes earlier design-system fixes on this branch: - Centralises `BASE_PATH` with a `/design-system` fallback so asset URLs work without a local `.env` file - Fixes sidebar hover and active tokens in design-system and ui-library, aligned with Studio's `InnerSideMenuItem` ## To test **Design system** 1. Open the [accessibility preview](https://design-system-git-fix-design-system-docs-and-nav-fixes-supabase.vercel.app/design-system/docs/accessibility) 2. Scroll to **Disabled controls** 3. Tab to the **disabled-focusable** example. Confirm the button remains focusable, looks disabled, and shows its tooltip on focus 4. Confirm the **disabled-unavailable-with-notice** example shows the admonition and focusable disabled button pattern **Studio (optional, requires a High Availability project)** 5. Go to Settings → General → **Pause project**. Tab to the button and confirm it remains focusable, looks disabled, and shows the HA tooltip on focus 6. Go to Database → Backups and find **Restore** on a scheduled backup row. Confirm the same behaviour
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import 'react-data-grid/lib/styles.css'
|
|
import '@/styles/globals.css'
|
|
|
|
import { genFaviconData } from 'common/MetaFavicons/app-router'
|
|
import type { Metadata, Viewport } from 'next'
|
|
|
|
import { Providers } from './Providers'
|
|
import { Toaster } from './toaster'
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
import { inter, manrope, sourceCodePro } from '@/lib/fonts'
|
|
|
|
const className = `${inter.variable} ${manrope.variable} ${sourceCodePro.variable}`
|
|
|
|
export const metadata: Metadata = {
|
|
applicationName: 'Supabase Design System',
|
|
title: 'Supabase Design System',
|
|
description: 'Design resources for building consistent user experiences at Supabase.',
|
|
icons: genFaviconData(BASE_PATH),
|
|
}
|
|
|
|
export const viewport: Viewport = {
|
|
themeColor: '#1E1E1E',
|
|
}
|
|
|
|
interface RootLayoutProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export default async function Layout({ children }: RootLayoutProps) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning className={className}>
|
|
<head>
|
|
{/* [Danny]: This has to be an inline style tag here and not a separate component due to next/font */}
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `:root{--font-sans:${inter.style.fontFamily};--font-heading:${manrope.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
|
|
}}
|
|
/>
|
|
</head>
|
|
<body>
|
|
<Providers>
|
|
<div vaul-drawer-wrapper="">
|
|
<div className="relative flex min-h-screen flex-col bg-background">{children}</div>
|
|
</div>
|
|
<Toaster />
|
|
</Providers>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|