supabase / supabase / 29782356902 / 1 – studio-tests

74%

master: 74%

push

github

fix(studio): untangle nested buttons in editor tabs (#48101)

## What kind of change does this PR introduce?

A11y markup + keyboard close for editor tabs (Table Editor open tables /
SQL Editor snippets).

## What is the current behavior?

Editor tabs nest interactive elements (already in prod):

1. Sortable shell spreads dnd-kit `attributes` → `div role="button"
tabindex="0"`
2. Inner `TabsTrigger` → real `<button role="tab">`
3. Close control → `role="button"` nested inside the tab button

Close was hover/pointer-only. There was no clear keyboard path.

## What is the new behavior?

**Markup**

- Sortable shell is a plain `div` (no dnd-kit `attributes` / no
`role="button"`). Safe because tab reorder only uses `PointerSensor`.
- Close is a real `<button type="button">` **sibling** of `TabsTrigger`.
- Same for the non-draggable “New” tab.

**Keyboard close**

- ←/→ still move between tabs (Radix roving tabindex — Tab key does not
walk every tab).
- **Delete** or **Backspace** on a focused tab closes it.
- The **active** tab’s close button is in the tab order
(`tabIndex={0}`); Tab from the active tab reaches ×, then Enter/Space
closes. Inactive closes stay `tabIndex={-1}`.
- Close shows on hover, focus-within, and focus-visible (with focus
ring).

## Test plan

### Markup
- [ ] Inspect DOM: no `role="button"` wrapper around `role="tab"`; close
is not nested inside the tab button

### Mouse
- [ ] Hover → ×; click × closes
- [ ] Drag reorder still works
- [ ] Middle-click / double-click pin / “New” tab close still work
- [ ] Context menu → Close still works

### Keyboard
- [ ] Focus the active tab (Tab into the strip, or click then Tab)
- [ ] ←/→ moves across tabs
- [ ] Delete or Backspace closes the focused tab
- [ ] From the active tab, Tab once focuses × (visible + ring);
Enter/Space closes
- [ ] Delete while focus is in the table grid / SQL editor (not on a
tab) does **not** close tabs

<!-- This is an auto-generated comment: release notes by coderab... (continued)

1212 of 1669 branches covered (72.62%)

Branch coverage included in aggregate %.

1784 of 2371 relevant lines covered (75.24%)

240.99 hits per line