mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Danny White
eef0f57309
## What kind of change does this PR introduce? Accessibility / UX fix ([DEPR-630](https://linear.app/supabase/issue/DEPR-630)). ## What is the current behavior? In Storage **As columns** view, keyboard select is unclear: the checkbox stays hidden until hover, so Tab/Space selection is hard to see. The row actions (three dots) menu also shows a browser default blue outline on Tab. ## What is the new behavior? Same icon/checkbox swap as list/hover, but also on keyboard focus: - Checkbox replaces the icon on hover, `:focus-within`, and when selected (no layout shift) - Checkbox becomes visible when focused via keyboard (without needing hover) - Row gets an inset outline while the checkbox is focused - Folders have no checkbox (non-focusable spacer only) - Row actions trigger uses `focus-ring` instead of the browser blue outline | Before | After | | --- | --- | | <img width="1046" height="362" alt="CleanShot 2026-07-31 at 14 37 47@2x" src="https://github.com/user-attachments/assets/9b827627-17e6-49a6-87a3-1253b4cef1da" /> | <img width="1046" height="390" alt="CleanShot 2026-07-31 at 14 37 13@2x" src="https://github.com/user-attachments/assets/2fd2b426-a8e2-4fda-b1ba-4df728b7b2f1" /> | | _Checkbox focussed but not visually shown_ | _Checkbox focussed and visually shown_ | ## To test 1. Open the **Studio preview** for this PR. 2. Go to **Storage → Files** → open a bucket with several files. 3. Set view to **As columns**. 4. Tab until a **file** checkbox is focused. **Expect:** - Icon is replaced by the checkbox (same slot; neighbouring row icons should not look shifted) - Checkbox visible without hovering - Row shows an inset outline 5. Press **Space** to select. Checkbox stays in the icon slot; selection background applies. 6. Hover another file. Same icon to checkbox swap as before. 7. Tab to the three-dot actions control on a row. Expect the shared focus ring (not a blue browser outline); the menu icon should become visible. 8. Folders: no checkbox in the tab order; click icon/name still opens the folder. 9. Smoke **As list**. Same swap behaviour. ## Additional context From Kemal's DEPR-621 review.