From 6e0cbcc91b52471d2e729eac6647ae4dab434ffa Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 13 Jun 2026 22:30:21 +0000
Subject: [PATCH 1/2] feat(ui): add a11y and focus states to filter pills

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md                         | 3 +++
 src/components/dashboard/filter-pills.tsx | 8 +++++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..60ac8d7b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-13 - Focus Visible on Custom Filter Pills
+**Learning:** For custom toggle buttons (like filter pills) that use `framer-motion` and conditional styling, relying on browser default focus states is often insufficient against dark backgrounds (e.g. `bg-neutral-800`). Explicitly adding `focus-visible:ring-2`, an offset, and `aria-pressed` drastically improves keyboard navigation clarity. Additionally, icon-only "Clear" buttons inside these filter groups frequently lack `aria-label`s.
+**Action:** Always check custom filter/toggle components for `aria-pressed` and robust `focus-visible` states, especially against dark themes.
diff --git a/src/components/dashboard/filter-pills.tsx b/src/components/dashboard/filter-pills.tsx
index d09effbe..7943739a 100644
--- a/src/components/dashboard/filter-pills.tsx
+++ b/src/components/dashboard/filter-pills.tsx
@@ -34,9 +34,10 @@ export function FilterPills({ options, selected, onToggle, onClear, className }:
           <motion.button
             key={option.id}
             onClick={() => onToggle(option.id)}
+            aria-pressed={isSelected}
             transition={{ duration: 0.15 }}
             className={cn(
-              'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all',
+              'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C8BF5] focus-visible:ring-offset-2 focus-visible:ring-offset-black',
               isSelected
                 ? 'bg-[#4C8BF5] text-white shadow-sm'
                 : 'bg-neutral-800 text-neutral-300 hover:bg-neutral-700'
@@ -60,9 +61,10 @@ export function FilterPills({ options, selected, onToggle, onClear, className }:
       {hasSelection && onClear && (
         <button
           onClick={onClear}
-          className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-300 transition-colors"
+          aria-label="Clear all filters"
+          className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C8BF5] focus-visible:ring-offset-2 focus-visible:ring-offset-black"
         >
-          <X className="size-3" />
+          <X className="size-3" aria-hidden="true" />
           Clear
         </button>
       )}

From ecc41b49e61b4b48cb219d957546fdbd4ac6b797 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 13 Jun 2026 22:40:09 +0000
Subject: [PATCH 2/2] feat(ui): add a11y and focus states to filter pills

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>