mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 10:59:38 +08:00
6f6badae51
## What kind of change does this PR introduce? Accessibility / lint hardening (Safari keyboard focus). ## What is the current behavior? `supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was at 0 but the rule was still ratcheted; www / docs / design-system still had raw `<button>` / `role="button"` call sites without an explicit `tabIndex`. [DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to #47984 / #48040 ## What is the new behavior? - Shared config: `'supabase/require-explicit-tabindex': 'error'` - Swept www / docs / design-system (+ Studio test fixtures the ratchet skipped) - Removed the rule from the Studio ratchet + baselines ## To test Prefer **Safari**. This PR only adds explicit `tabIndex` to raw `<button>` / `role="button"` call sites — not links, and not controls that already go through `Button` from `ui`. ### Marketing (`www`) ([staging link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/)) - [x] Homepage frameworks / dashboard feature tabs — Tab through each tab button - [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers - [x] Narrow viewport — open the hamburger; Tab through menu buttons - [x] `/partners/catalog` — filter / view controls - [x] Blog view toggle (list ↔ grid) ### Docs ([staging link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/)) - [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens a dropdown that includes Theme. Not a separate theme button. - [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close (X) is the raw button we tagged. Theme inside the sheet uses `ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set `tabIndex`). - [x] **Code blocks** — copy / language controls - [x] **Is this helpful?** — X / check are `Button` from `ui` (should already Tab). After voting **while signed in**, the follow-up “What went well?” / “How can we improve?” text button is the raw one we tagged. - [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is the only GuidesSidebar control this PR changed. “On this page” TOC items are **links**, not covered by this lint. - [x] **Reference docs** (e.g. JS client reference) — section headers that expand/collapse in the left nav (`Collapsible.Trigger`) - [x] **Troubleshooting index** — type in the search field, then Tab to the **clear (X)** control ### Dashboard (`studio`) No production UI changes in this PR (tests + lint config only). Quick Safari smoke that prior tabindex work still holds: - [x] Project sidebar — Tab through primary nav links - [x] Settings → General — Tab through inputs / buttons - [x] Storage → Files — Tab a bucket row / file actions
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import ApiSchema from '~/components/ApiSchema'
|
|
import { XCircle } from 'lucide-react'
|
|
import { useState, type FC, type PropsWithChildren } from 'react'
|
|
import { cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
|
|
|
|
interface IOptions {
|
|
name?: string
|
|
}
|
|
|
|
type IOption = any
|
|
|
|
type OptionsSubComponents = {
|
|
Option: IOption
|
|
}
|
|
|
|
const ApiSchemaOptions: FC<PropsWithChildren<IOptions>> & OptionsSubComponents = (props) => {
|
|
const [open, setOpen] = useState(false)
|
|
return (
|
|
<Collapsible open={open} onOpenChange={setOpen} className="mt-0">
|
|
<CollapsibleTrigger asChild>
|
|
<button
|
|
tabIndex={0}
|
|
className={cn(
|
|
'px-5',
|
|
'border-t border-l border-r border-default',
|
|
'text-left text-sm text-foreground-light',
|
|
'hover:bg-surface-100 transition-all',
|
|
'flex items-center gap-2',
|
|
open ? 'w-full py-1.5 rounded-tl-lg rounded-tr-lg' : 'py-1 border-b rounded-full'
|
|
)}
|
|
>
|
|
<XCircle size={14} className={open ? '' : 'rotate-45'} />
|
|
{`${!open ? `Open` : `Close`} ${props.name ?? 'object schema'}`}
|
|
</button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>{props.children}</CollapsibleContent>
|
|
</Collapsible>
|
|
)
|
|
}
|
|
|
|
ApiSchemaOptions.Option = ApiSchema
|
|
|
|
export default ApiSchemaOptions
|