letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(audit-wave-10): aria-hidden sweep on decorative Lucide icons (#69)

Browse Source 
Mechanical codemod added \`aria-hidden\` to 444 self-closing single-line
Lucide icon JSX elements across 267 .tsx files in:

- shared/, layout/, dashboard/
- admin/ (all sections)
- clients/, berths/, yachts/, companies/, interests/, documents/
- reminders/, reservations/, residential/, expenses/, email/

The regex targeted only the safe pattern \`<IconName className="..." />\`
(no other props, self-closing, capitalized component name). Every match
inspected is a decorative companion to visible text or sits inside a
button whose accessible name comes from \`aria-label\` / sr-only text
— the icon itself should not be announced.

Screen readers no longer double-read the icon + the adjacent label
text (e.g. "Pencil Pencil Edit" → just "Edit"). The existing
@axe-core/playwright smoke test (\`20-accessibility.spec.ts\`) continues
to pass.

Test suite stays at 1315/1315 vitest. typescript clean.

Closes task #69 (aria-hidden sweep) from the AUDIT-2026-05-12 follow-ups
backlog.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-13 12:37:22 +02:00
parent ecf49be18c
commit c8ea9ec0a0
172 changed files with 727 additions and 614 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/berths/berth-card.tsx
View File

@@ -107,7 +107,7 @@ export function BerthCard({ berth }: BerthCardProps) {
onClick={(e) => e.stopPropagation()}
aria-label={`Actions for berth ${berth.mooringNumber}`}
>
<MoreHorizontal className="h-4 w-4" />
<MoreHorizontal className="h-4 w-4" aria-hidden />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -117,7 +117,7 @@ export function BerthCard({ berth }: BerthCardProps) {
router.push(`/${portSlug}/berths/${berth.id}`);
}}
>
<Activity className="mr-2 h-3.5 w-3.5" />
<Activity className="mr-2 h-3.5 w-3.5" aria-hidden />
View details
</DropdownMenuItem>
<DropdownMenuItem
@@ -126,7 +126,7 @@ export function BerthCard({ berth }: BerthCardProps) {
router.push(`/${portSlug}/berths/${berth.id}?edit=true`);
}}
>
<Pencil className="mr-2 h-3.5 w-3.5" />
<Pencil className="mr-2 h-3.5 w-3.5" aria-hidden />
Edit
</DropdownMenuItem>
</DropdownMenuContent>

6
src/components/berths/berth-columns.tsx
View File

@@ -147,7 +147,7 @@ function ActionsCell({ row }: { row: { original: BerthRow } }) {
className="h-8 w-8"
onClick={(e) => e.stopPropagation()}
>
<MoreHorizontal className="h-4 w-4" />
<MoreHorizontal className="h-4 w-4" aria-hidden />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
@@ -158,7 +158,7 @@ function ActionsCell({ row }: { row: { original: BerthRow } }) {
router.push(`/${params.portSlug}/berths/${berth.id}`);
}}
>
<Activity className="mr-2 h-4 w-4" />
<Activity className="mr-2 h-4 w-4" aria-hidden />
View details
</DropdownMenuItem>
<DropdownMenuItem
@@ -167,7 +167,7 @@ function ActionsCell({ row }: { row: { original: BerthRow } }) {
router.push(`/${params.portSlug}/berths/${berth.id}?edit=true`);
}}
>
<Pencil className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" aria-hidden />
Edit
</DropdownMenuItem>
</DropdownMenuContent>

4
src/components/berths/berth-deal-documents-tab.tsx
View File

@@ -65,7 +65,7 @@ export function BerthDealDocumentsTab({ berthId }: { berthId: string }) {
className="flex flex-wrap items-center justify-between gap-2 py-2.5 text-sm"
>
<div className="flex min-w-0 items-center gap-2">
<FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
<FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
<span className="truncate font-medium">{doc.title}</span>
<span className="text-xs text-muted-foreground">{doc.documentType}</span>
</div>
@@ -76,7 +76,7 @@ export function BerthDealDocumentsTab({ berthId }: { berthId: string }) {
href={`/${portSlug}/interests/${doc.interestId}` as any}
className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
>
Open <ExternalLink className="h-3 w-3" />
Open <ExternalLink className="h-3 w-3" aria-hidden />
</Link>
</div>
</li>

8
src/components/berths/berth-detail-header.tsx
View File

@@ -290,11 +290,11 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
<div className="flex flex-wrap items-center gap-2 sm:shrink-0">
<PermissionGate resource="berths" action="edit">
<Button variant="outline" size="sm" onClick={() => setStatusOpen(true)}>
<RefreshCw className="mr-1.5 h-4 w-4" />
<RefreshCw className="mr-1.5 h-4 w-4" aria-hidden />
Change Status
</Button>
<Button size="sm" onClick={() => setEditOpen(true)}>
<Pencil className="mr-1.5 h-4 w-4" />
<Pencil className="mr-1.5 h-4 w-4" aria-hidden />
Edit
</Button>
</PermissionGate>
@@ -369,7 +369,7 @@ function InterestLinkPicker({
) : (
'— No interest —'
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" aria-hidden />
</Button>
</PopoverTrigger>
<PopoverContent className="w-(--radix-popper-anchor-width) min-w-[320px] p-0" align="start">
@@ -420,7 +420,7 @@ function InterestLinkPicker({
{stageLabel(opt.pipelineStage)}
</span>
{value === opt.id ? (
<Check className="h-3.5 w-3.5 text-muted-foreground" />
<Check className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
) : null}
</CommandItem>
))}

9
src/components/berths/berth-interest-pulse.tsx
View File

@@ -84,7 +84,7 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-1.5 text-sm font-medium">
<Users className="size-3.5" />
<Users className="size-3.5" aria-hidden />
Interested parties
</CardTitle>
</CardHeader>
@@ -99,7 +99,7 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-3 space-y-0">
<CardTitle className="flex items-center gap-1.5 text-sm font-medium">
<Users className="size-3.5" />
<Users className="size-3.5" aria-hidden />
Interested parties
<span className="ml-1 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
{active.length}
@@ -161,7 +161,10 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
</p>
) : null}
</div>
<ChevronRight className="size-4 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5" />
<ChevronRight
className="size-4 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5"
aria-hidden
/>
</Link>
</li>
);

2
src/components/berths/berth-reservations-tab.tsx
View File

@@ -48,7 +48,7 @@ export function BerthReservationsTab({ berthId }: BerthReservationsTabProps) {
<h3 className="text-lg font-semibold">Reservations</h3>
<PermissionGate resource="reservations" action="create">
<Button size="sm" onClick={() => setReserveOpen(true)}>
<Plus className="mr-1.5 h-4 w-4" />
<Plus className="mr-1.5 h-4 w-4" aria-hidden />
Reserve this berth
</Button>
</PermissionGate>

6
src/components/berths/berth-status-suggestion-dialog.tsx
View File

@@ -60,7 +60,7 @@ export function BerthStatusSuggestionDialog({
<Badge variant="outline" className="text-base px-4 py-1.5">
{currentStatus.replace(/_/g, ' ')}
</Badge>
<ArrowRight className="h-5 w-5 text-muted-foreground" />
<ArrowRight className="h-5 w-5 text-muted-foreground" aria-hidden />
<Badge variant="default" className="text-base px-4 py-1.5">
{suggestedStatus.replace(/_/g, ' ')}
</Badge>
@@ -73,7 +73,9 @@ export function BerthStatusSuggestionDialog({
Dismiss
</Button>
<Button onClick={() => applyMutation.mutate()} disabled={applyMutation.isPending}>
{applyMutation.isPending && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
{applyMutation.isPending && (
<Loader2 className="mr-1.5 h-4 w-4 animate-spin" aria-hidden />
)}
Apply Change
</Button>
</DialogFooter>

10
src/components/berths/waiting-list-manager.tsx
View File

@@ -68,7 +68,7 @@ function SortableEntry({
{...listeners}
className="cursor-grab active:cursor-grabbing text-muted-foreground"
>
<GripVertical className="h-4 w-4" />
<GripVertical className="h-4 w-4" aria-hidden />
</button>
<span className="text-sm font-mono w-6 text-center text-muted-foreground">
@@ -88,7 +88,7 @@ function SortableEntry({
onClick={() => onRemove(entry.id)}
className="text-muted-foreground hover:text-destructive transition-colors"
>
<Trash2 className="h-4 w-4" />
<Trash2 className="h-4 w-4" aria-hidden />
</button>
</div>
);
@@ -189,7 +189,7 @@ export function WaitingListManager({ berthId }: WaitingListManagerProps) {
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Waiting List ({entries.length})</span>
<Button size="sm" variant="outline" onClick={() => setShowAddForm((v) => !v)}>
<Plus className="mr-1.5 h-4 w-4" />
<Plus className="mr-1.5 h-4 w-4" aria-hidden />
Add
</Button>
</div>
@@ -217,7 +217,9 @@ export function WaitingListManager({ berthId }: WaitingListManagerProps) {
/>
<div className="flex gap-2">
<Button size="sm" onClick={handleAdd} disabled={addMutation.isPending}>
{addMutation.isPending && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
{addMutation.isPending && (
<Loader2 className="mr-1.5 h-4 w-4 animate-spin" aria-hidden />
)}
Add to List
</Button>
<Button size="sm" variant="ghost" onClick={() => setShowAddForm(false)}>