Once tags are a filter (#206), the tags already printed on every card are the shortest way to one: click what you can see, rather than remember it and type it. abernier/examples does exactly this, and it is the best idea in it.
It is held back from that change because it moves the keyboard rules of the list, not the layout of the header, and the two want separate reads.
The markup is nearly there
ItemFooter is already absolute inset-x-0 bottom-0 — the strip is an overlay on the thumbnail today. What it is not is a sibling: it sits inside Item, which is the card's <a>. A <button> inside an anchor is invalid, so the strip moves one level out into the <li>. Same box, same paint.
What it actually costs
Focus. useRovingTabIndex collects a[href], button:not([disabled]) across the whole subtree it is given, so tag buttons would join the list's vertical group and ArrowDown would start walking tags instead of jumping card to card. The selector has to be scoped, and the strip given a horizontal group of its own.
That hook is shared with the example bar, so the change reaches past the rail — which is the whole reason this is not folded into the combobox work.
Once tags are a filter (#206), the tags already printed on every card are the shortest way to one: click what you can see, rather than remember it and type it.
abernier/examplesdoes exactly this, and it is the best idea in it.It is held back from that change because it moves the keyboard rules of the list, not the layout of the header, and the two want separate reads.
The markup is nearly there
ItemFooteris alreadyabsolute inset-x-0 bottom-0— the strip is an overlay on the thumbnail today. What it is not is a sibling: it sits insideItem, which is the card's<a>. A<button>inside an anchor is invalid, so the strip moves one level out into the<li>. Same box, same paint.What it actually costs
Focus.
useRovingTabIndexcollectsa[href], button:not([disabled])across the whole subtree it is given, so tag buttons would join the list's vertical group and ArrowDown would start walking tags instead of jumping card to card. The selector has to be scoped, and the strip given a horizontal group of its own.That hook is shared with the example bar, so the change reaches past the rail — which is the whole reason this is not folded into the combobox work.