mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Danny White
9a03f3cd9c
## Problem - Filter fields could not be re-entered with Tab, and remove buttons were previously skipped. - Earlier focus rings flashed or crowded controls. Segmented filters and design system examples also had uneven layout. ## Solution - Tab now reaches each filter’s property, operator, value and remove button. Editable fields use the caret; read-only values and remove buttons keep a visible focus cue. - Refined spacing and sizing. The segmented highlight is inset and clears when focus enters a control. Both variants and the focus guidance are documented on the [design system page](https://design-system-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/design-system/docs/fragments/filter-bar). |After | | --- | | <img width="462" height="126" alt="CleanShot 2026-09-24 at 15 04 23@2x" src="https://github.com/user-attachments/assets/2ee8bee2-f4fa-40f4-ada5-67bfe32384e7" /> | | <img width="362" height="96" alt="CleanShot 2026-09-24 at 15 04 47@2x" src="https://github.com/user-attachments/assets/9f42054a-f432-493d-b417-f10892676c96" /> | ## Review instructions The easiest way to test this is to open Table Editor on both production/staging and on this PR’s [deploy preview](https://studio-staging-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/). Try navigating by keyboard (tab, left/right arrow) within the Filter Bar. Compare the two. - In Studio’s Table Editor or the [design system example](https://design-system-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/design-system/docs/fragments/filter-bar), add a filter. Tab through its property, operator, value and remove button, then Shift+Tab back into editing. - Check that the segmented and pill examples fill their preview width and that focus cues do not collide with neighbouring controls. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary * **New Features** * Added a pill appearance for the Filter Bar, with usage guidance and interactive examples for pill and segmented presentations. * **Accessibility** * Improved keyboard navigation through filter controls, including removing a filter with the keyboard. * Clarified that an editable text field’s insertion caret can serve as its visible focus indicator; read-only fields and controls without a caret still need another visible indicator. * **Style** * Refined Filter Bar spacing and focus styling across appearances. <!-- end of auto-generated comment: release notes by coderabbit.ai -->