add ARIA labels and pressed states to board list and remaining components

This commit is contained in:
Your Name
2026-02-19 19:55:30 +02:00
parent d66e90a6d5
commit 0b155c6023
5 changed files with 8 additions and 2 deletions

View File

@@ -44,6 +44,7 @@ export function AddCardInput({ columnId, onClose }: AddCardInputProps) {
onBlur={() => { onBlur={() => {
if (!value.trim()) onClose(); if (!value.trim()) onClose();
}} }}
aria-label="Card title"
placeholder="Card title..." placeholder="Card title..."
rows={2} rows={2}
className="w-full resize-none rounded-lg bg-pylon-surface p-3 text-sm text-pylon-text shadow-sm outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent" className="w-full resize-none rounded-lg bg-pylon-surface p-3 text-sm text-pylon-text shadow-sm outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"

View File

@@ -8,7 +8,7 @@ export function ChecklistBar({ checklist }: ChecklistBarProps) {
if (checklist.length === 0) return null; if (checklist.length === 0) return null;
return ( return (
<div className="flex items-center gap-px"> <div className="flex items-center gap-px" aria-label={`Checklist: ${checklist.filter(i => i.checked).length} of ${checklist.length} complete`} role="img">
{checklist.map((item) => ( {checklist.map((item) => (
<span <span
key={item.id} key={item.id}

View File

@@ -27,6 +27,8 @@ export function LabelDots({ labelIds, boardLabels }: LabelDotsProps) {
<span <span
className="inline-block size-2 shrink-0 rounded-full" className="inline-block size-2 shrink-0 rounded-full"
style={{ backgroundColor: label.color }} style={{ backgroundColor: label.color }}
aria-label={label.name}
role="img"
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>{label.name}</TooltipContent> <TooltipContent>{label.name}</TooltipContent>

View File

@@ -183,6 +183,7 @@ export function BoardCard({ board, sortable = false }: BoardCardProps) {
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
<button <button
onClick={handleOpen} onClick={handleOpen}
aria-label={`Open board: ${board.title} - ${board.cardCount} cards, ${board.columnCount} columns, updated ${relativeTime}`}
className="group flex w-full flex-col rounded-lg bg-pylon-surface shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md text-left" className="group flex w-full flex-col rounded-lg bg-pylon-surface shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md text-left"
> >
{/* Color accent stripe */} {/* Color accent stripe */}

View File

@@ -170,6 +170,7 @@ export function NewBoardDialog({ open, onOpenChange }: NewBoardDialogProps) {
variant={template === t && !selectedUserTemplate ? "default" : "outline"} variant={template === t && !selectedUserTemplate ? "default" : "outline"}
size="sm" size="sm"
onClick={() => { setTemplate(t); setSelectedUserTemplate(null); }} onClick={() => { setTemplate(t); setSelectedUserTemplate(null); }}
aria-pressed={template === t && !selectedUserTemplate}
className="capitalize" className="capitalize"
> >
{t} {t}
@@ -182,6 +183,7 @@ export function NewBoardDialog({ open, onOpenChange }: NewBoardDialogProps) {
variant={selectedUserTemplate?.id === ut.id ? "default" : "outline"} variant={selectedUserTemplate?.id === ut.id ? "default" : "outline"}
size="sm" size="sm"
onClick={() => { setSelectedUserTemplate(ut); setColor(ut.color); }} onClick={() => { setSelectedUserTemplate(ut); setColor(ut.color); }}
aria-pressed={selectedUserTemplate?.id === ut.id}
> >
<span <span
className="inline-block size-2 rounded-full shrink-0" className="inline-block size-2 rounded-full shrink-0"
@@ -193,7 +195,7 @@ export function NewBoardDialog({ open, onOpenChange }: NewBoardDialogProps) {
type="button" type="button"
onClick={() => handleDeleteTemplate(ut.id)} onClick={() => handleDeleteTemplate(ut.id)}
className="rounded p-0.5 text-pylon-text-secondary opacity-0 hover:opacity-100 hover:bg-pylon-danger/10 hover:text-pylon-danger transition-opacity" className="rounded p-0.5 text-pylon-text-secondary opacity-0 hover:opacity-100 hover:bg-pylon-danger/10 hover:text-pylon-danger transition-opacity"
title="Delete template" aria-label="Delete template"
> >
<X className="size-3" /> <X className="size-3" />
</button> </button>