lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

add labels and ARIA attributes to filter bar inputs

Browse Source
This commit is contained in:
Your Name
2026-02-19 19:51:56 +02:00
parent fe5baec172
commit f79e4c7090
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/board/FilterBar.tsx
View File

@@ -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>