add labels and ARIA attributes to filter bar inputs

This commit is contained in:
Your Name
2026-02-19 19:51:56 +02:00
parent fe5baec172
commit f79e4c7090

View File

@@ -79,6 +79,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
value={textDraft} value={textDraft}
onChange={(e) => handleTextChange(e.target.value)} onChange={(e) => handleTextChange(e.target.value)}
placeholder="Search cards..." 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" className="h-5 w-40 bg-transparent text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
/> />
</div> </div>
@@ -90,6 +91,8 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
<button <button
key={label.id} key={label.id}
onClick={() => toggleLabel(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 ${ className={`rounded-full px-2 py-0.5 text-xs transition-all ${
filters.labels.includes(label.id) filters.labels.includes(label.id)
? "text-white" ? "text-white"
@@ -107,6 +110,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
<select <select
value={filters.dueDate} value={filters.dueDate}
onChange={(e) => onChange({ ...filters, dueDate: e.target.value as FilterState["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" className="h-6 rounded-md bg-pylon-column px-2 text-xs text-pylon-text outline-none"
> >
<option value="all">All dates</option> <option value="all">All dates</option>
@@ -120,6 +124,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
<select <select
value={filters.priority} value={filters.priority}
onChange={(e) => onChange({ ...filters, priority: e.target.value as FilterState["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" className="h-6 rounded-md bg-pylon-column px-2 text-xs text-pylon-text outline-none"
> >
<option value="all">All priorities</option> <option value="all">All priorities</option>
@@ -137,7 +142,7 @@ export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBar
Clear all Clear all
</Button> </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" /> <X className="size-3.5" />
</Button> </Button>
</div> </div>