mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Danny White
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
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { AlertTriangle, X } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Button } from 'ui'
|
|
|
|
interface DraftModeBannerProps {
|
|
onDismiss?: () => void
|
|
}
|
|
|
|
function DraftModeBanner({ onDismiss }: DraftModeBannerProps) {
|
|
return (
|
|
<div className="fixed inset-0 top-auto z-40 bg-surface-400 border-t">
|
|
<div className="max-w-2xl mx-auto py-2 px-4">
|
|
<div className="flex items-center justify-between flex-wrap">
|
|
<div className="w-0 flex-1 flex items-center">
|
|
<span className="flex p-2 rounded-sm">
|
|
<AlertTriangle className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<p className="ml-2 truncate">
|
|
<span className="md:hidden">You're viewing draft content</span>
|
|
<span className="hidden md:inline">
|
|
You're viewing draft content that may not be published yet.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
{onDismiss && (
|
|
<div className="order-2 shrink-0 sm:order-3 sm:ml-3">
|
|
<button
|
|
tabIndex={0}
|
|
type="button"
|
|
className="-mr-1 flex p-2 rounded-md sm:-mr-2"
|
|
onClick={onDismiss}
|
|
>
|
|
<span className="sr-only">Dismiss</span>
|
|
<X className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DraftModeBanner
|