mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
37296128e0
## 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 coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added dedicated close buttons for tabs, with visibility on hover or
focus.
* Tabs can now be closed using the Delete or Backspace keys when
focused.
* **Bug Fixes**
* Improved tab selection and drag interactions when clicking or pressing
tab close controls.
* Prevented closing a tab from unintentionally activating or dragging
it.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->