FilterBar
A row of filters over the list below it.
This was called Tabs, and the rename is the fix
ARIA's role="tablist" promises three things it never had: tabpanels for each tab to control, arrow-key navigation with a roving tabindex, and panels that swap in place. What these actually do is navigate — ?status=DEAD changes the URL and loads a different list.
Marked up as tabs, a screen reader announced “tab, 1 of 5, selected” for what is a link, and promised keyboard behaviour that did not exist. It is now a <nav> of links with aria-current="page", which is what it always was.
Filters are usually links
Pass href and it renders an <a>; pass onClick and it renders a <button>. Prefer the link: middle-click opens a new tab, the back button works, and a filtered view is something you can paste to a colleague.
Guidance
Use it when
- Filtering a list you are already looking at.
- count, so someone sees there is nothing to look at before clicking.
- as={Link} to keep your framework's client-side navigation.
Reach for something else when
- Real tabs — panels swapping in place. That is a different component and it owes you arrow-key navigation.
- Navigating between unrelated pages. That is the sidebar.
- More than about seven. Past that it is a Select.
- Appending the count yourself — “DEAD (3)” vs “DEAD 3” vs “DEAD · 3” is the drift this prevents.