fix(eslint): promote require-explicit-tabindex to error (#48170)

## 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

apps/design-system/__registry__/default/block/chart-bar-interactive.tsx

@@ -146,7 +146,7 @@ export default function Component() {
           {['desktop', 'mobile'].map((key) => {
             const chart = key as keyof typeof chartConfig
             return (
-              <button
+              <button tabIndex={0}
                 key={chart}
                 data-active={activeChart === chart}
                 className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-surface-100 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"

apps/design-system/components/click-counter.tsx

@@ -7,6 +7,7 @@ export function ClickCounter() {
 
   return (
     <button
+      tabIndex={0}
       onClick={() => setCount(count + 1)}
       className="whitespace-nowrap rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"
     >

apps/design-system/components/color-palette.tsx

@@ -60,6 +60,7 @@ const ColorPalette = () => {
                 const isCopied = copied === reference
                 return (
                   <button
+                    tabIndex={0}
                     key={step * 100}
                     type="button"
                     onClick={() => handleCopy(reference)}

apps/design-system/registry/default/block/chart-bar-interactive.tsx

@@ -147,6 +147,7 @@ export default function Component() {
             const chart = key as keyof typeof chartConfig
             return (
               <button
+                tabIndex={0}
                 key={chart}
                 data-active={activeChart === chart}
                 className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-surface-100 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"

apps/design-system/registry/default/example/form-patterns-pagelayout.tsx

@@ -434,6 +434,7 @@ export default function FormPatternsPageLayout() {
                               <p className="text-xs text-foreground-lighter">
                                 Drag and drop or{' '}
                                 <button
+                                  tabIndex={0}
                                   type="button"
                                   onClick={() => fileUploadRef.current?.click()}
                                   className="underline cursor-pointer hover:text-foreground-light"

apps/design-system/registry/default/example/form-patterns-sidepanel.tsx

@@ -316,6 +316,7 @@ export default function FormPatternsSidePanel() {
                       <FormControl className="col-span-6">
                         <div className="flex gap-4 items-center">
                           <button
+                            tabIndex={0}
                             type="button"
                             onClick={() => uploadButtonRef.current?.click()}
                             className="flex items-center justify-center h-10 w-10 shrink-0 text-foreground-lighter hover:text-foreground-light overflow-hidden rounded-full bg-cover border hover:border-strong focus-visible:outline-brand-600"
@@ -424,6 +425,7 @@ export default function FormPatternsSidePanel() {
                             <p className="text-xs text-foreground-lighter">
                               Drag and drop or{' '}
                               <button
+                                tabIndex={0}
                                 type="button"
                                 onClick={() => fileUploadRef.current?.click()}
                                 className="underline cursor-pointer hover:text-foreground-light"

apps/design-system/registry/default/example/page-layout-auth-emails.tsx

@@ -139,6 +139,7 @@ export default function PageLayoutAuthEmails() {
           {subPages.map((page) => (
             <NavMenuItem key={page.id} active={activePage === page.id}>
               <button
+                tabIndex={0}
                 type="button"
                 aria-pressed={activePage === page.id}
                 className="h-full cursor-pointer appearance-none bg-transparent text-inherit"
@@ -212,6 +213,7 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) {
               {AUTHENTICATION_TEMPLATES.map((template) => (
                 <CardContent key={template.title} className="p-0">
                   <button
+                    tabIndex={0}
                     type="button"
                     className="flex w-full items-center justify-between px-6 py-4 text-left transition-colors hover:bg-surface-200"
                   >
@@ -248,7 +250,11 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) {
                         key={template.id}
                         className="flex h-full w-full items-center justify-between p-0 transition-colors hover:bg-surface-200"
                       >
-                        <button type="button" className="flex flex-1 flex-col px-6 py-4 text-left">
+                        <button
+                          tabIndex={0}
+                          type="button"
+                          className="flex flex-1 flex-col px-6 py-4 text-left"
+                        >
                           <h3 className="text-sm text-foreground">{template.title}</h3>
                           <p className="text-sm text-foreground-lighter">{template.purpose}</p>
                         </button>
@@ -263,7 +269,12 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) {
                               </FormControl>
                             )}
                           />
-                          <button type="button" className="py-6 pr-6" aria-label="Edit template">
+                          <button
+                            tabIndex={0}
+                            type="button"
+                            className="py-6 pr-6"
+                            aria-label="Edit template"
+                          >
                             <ChevronRight size={16} className="text-foreground-muted" />
                           </button>
                         </div>

apps/design-system/registry/default/example/page-layout-edge-function.tsx

@@ -261,6 +261,7 @@ export default function PageLayoutEdgeFunction() {
           {pages.map((page) => (
             <NavMenuItem key={page.id} active={activePage === page.id}>
               <button
+                tabIndex={0}
                 type="button"
                 aria-pressed={activePage === page.id}
                 className="h-full cursor-pointer appearance-none bg-transparent text-inherit"

apps/design-system/registry/default/example/page-nav-demo.tsx

@@ -20,6 +20,7 @@ export default function PageNavDemo() {
           {pages.map((page) => (
             <NavMenuItem key={page.id} active={activePage === page.id}>
               <button
+                tabIndex={0}
                 type="button"
                 aria-pressed={activePage === page.id}
                 className="h-full cursor-pointer appearance-none bg-transparent text-inherit"

apps/design-system/registry/default/example/success-check-selected.tsx

@@ -15,6 +15,7 @@ export default function SuccessCheckSelected() {
 
         return (
           <button
+            tabIndex={0}
             key={option}
             type="button"
             aria-pressed={isSelected}