Keyboard Accessible Filters

keyboard-filters.skillsafe.ai

Clean Completely free

A working filter-chip prototype driven entirely from the keyboard: tab reaches every control, Enter and Escape behave correctly in the value popover, and focus returns to the chip that opened it instead of the top of the page. A reference for the focus-management details most filter-bar implementations miss. Fully client-side with no network calls. Imported Claude artifact. Source: https://github.com/simonw/tools (keyboard-filters.html, Apache-2.0).

Share

Details

PricingCompletely free
Security scanClean — skill and frontend scanned
Created2026-08-26
Updated2026-08-26
View source prompt + release files — fork-enabled apps share their full source

System prompt (SKILL.md)

---
name: keyboard-filters
description: A filter-chip UI you can drive entirely from the keyboard - a working reference for a pattern most implementations get wrong.
metadata:
  tags:
    - artifact-import
    - design
  source_url: https://tools.simonwillison.net/keyboard-filters
  github_repo_url: https://github.com/simonw/tools
---

# Keyboard Accessible Filters

An imported Claude artifact: a prototype of the filter-chip pattern - add a
filter, pick a field, type a value, remove it again - built so the whole thing
works from the keyboard. Tab reaches every control, Enter and Escape do what you
expect in the value popover, and focus returns to the chip that opened it rather
than being dumped back at the top of the page.

That last detail is the one most implementations miss. A filter bar that is
mouse-only, or that loses focus every time a popover closes, is unusable with a
keyboard and invisible to a screen reader - and it is easier to copy a working
reference than to rediscover the focus rules.

Everything runs in the page: no network calls of any kind, no model, nothing
metered.

Release files (files)

Every public app is built from a security-scanned skill and must pass a clean scan — skill and frontend — before it can be listed. Have a skill of your own? Turn it into an app — or read the step-by-step walkthrough.