add labels and ARIA attributes to filter bar inputs
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user