mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08: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
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import '@testing-library/jest-dom/vitest'
|
|
import './lib/disabled-matchers'
|
|
|
|
import { cleanup } from '@testing-library/react'
|
|
import dayjs from 'dayjs'
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
import timezone from 'dayjs/plugin/timezone'
|
|
import utc from 'dayjs/plugin/utc'
|
|
import { createDynamicRouteParser } from 'next-router-mock/dist/dynamic-routes'
|
|
import { afterAll, afterEach, beforeAll, vi } from 'vitest'
|
|
|
|
import { mswServer } from './lib/msw'
|
|
import { routerMock } from './lib/route-mock'
|
|
|
|
dayjs.extend(utc)
|
|
dayjs.extend(timezone)
|
|
dayjs.extend(relativeTime)
|
|
|
|
// Uncomment this if HTML in errors are being annoying.
|
|
//
|
|
// configure({
|
|
// getElementError: (message, container) => {
|
|
// const error = new Error(message ?? 'Element not found')
|
|
// error.name = 'ElementNotFoundError'
|
|
// return error
|
|
// },
|
|
// })
|
|
|
|
// These must stay at module scope: Vitest hoists `vi.mock` above imports.
|
|
vi.mock('next/router', () => require('next-router-mock'))
|
|
vi.mock('next/navigation', async () => {
|
|
const actual = await vi.importActual('next/navigation')
|
|
return {
|
|
...actual,
|
|
useRouter: () => {
|
|
return {
|
|
push: vi.fn(),
|
|
replace: vi.fn(),
|
|
}
|
|
},
|
|
usePathname: () => vi.fn(),
|
|
useSearchParams: () => ({
|
|
get: vi.fn(),
|
|
}),
|
|
}
|
|
})
|
|
|
|
vi.mock('next/compat/router', () => require('next-router-mock'))
|
|
|
|
// Mock the useParams hook from common module globally
|
|
vi.mock('common', async (importOriginal: any) => {
|
|
const actual = await importOriginal()
|
|
return {
|
|
...(typeof actual === 'object' ? actual : {}),
|
|
useParams: () => ({ ref: 'default' }),
|
|
}
|
|
})
|
|
|
|
beforeAll(() => {
|
|
mswServer.listen({ onUnhandledRequest: `error` })
|
|
routerMock.useParser(createDynamicRouteParser(['/projects/[ref]']))
|
|
})
|
|
|
|
afterEach(() => {
|
|
mswServer.resetHandlers()
|
|
cleanup()
|
|
})
|
|
|
|
afterAll(() => {
|
|
mswServer.close()
|
|
})
|