add ARIA labels and pressed states to board list and remaining components
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 */}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user