From 56eab06dc44cc6b99b451454e893603802155f24 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 19 Feb 2026 19:51:56 +0200
Subject: [PATCH] add labels and ARIA attributes to filter bar inputs

---
 src/components/board/FilterBar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/board/FilterBar.tsx b/src/components/board/FilterBar.tsx
index a868b9c..ff09a3c 100644
--- a/src/components/board/FilterBar.tsx
+++ b/src/components/board/FilterBar.tsx
@@ -79,6 +79,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
             value={textDraft}
             onChange={(e) => handleTextChange(e.target.value)}
             placeholder="Search cards..."
+            aria-label="Search cards"
             className="h-5 w-40 bg-transparent text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
           />
         </div>
@@ -90,6 +91,8 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
               <button
                 key={label.id}
                 onClick={() => toggleLabel(label.id)}
+                aria-label={`Filter by label: ${label.name}`}
+                aria-pressed={filters.labels.includes(label.id)}
                 className={`rounded-full px-2 py-0.5 text-xs transition-all ${
                   filters.labels.includes(label.id)
                     ? "text-white"
@@ -107,6 +110,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
         <select
           value={filters.dueDate}
           onChange={(e) => onChange({ ...filters, dueDate: e.target.value as FilterState["dueDate"] })}
+          aria-label="Filter by due date"
           className="h-6 rounded-md bg-pylon-column px-2 text-xs text-pylon-text outline-none"
         >
           <option value="all">All dates</option>
@@ -120,6 +124,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
         <select
           value={filters.priority}
           onChange={(e) => onChange({ ...filters, priority: e.target.value as FilterState["priority"] })}
+          aria-label="Filter by priority"
           className="h-6 rounded-md bg-pylon-column px-2 text-xs text-pylon-text outline-none"
         >
           <option value="all">All priorities</option>
@@ -137,7 +142,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
             Clear all
           </Button>
         )}
-        <Button variant="ghost" size="icon-xs" onClick={onClose} className="text-pylon-text-secondary hover:text-pylon-text">
+        <Button variant="ghost" size="icon-xs" onClick={onClose} aria-label="Close filter bar" className="text-pylon-text-secondary hover:text-pylon-text">
           <X className="size-3.5" />
         </Button>
       </div>