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

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>
2026-05-13 12:37:22 +02:00
parent ecf49be18c
commit c8ea9ec0a0
172 changed files with 727 additions and 614 deletions
--- a/src/components/shared/addresses-editor.tsx
+++ b/src/components/shared/addresses-editor.tsx
@@ -105,7 +105,7 @@ export function AddressesEditor({ endpoint, invalidateKey, addresses }: Addresse
          className="w-full justify-center"
          data-testid="add-address-button"
        >
-          <Plus className="h-3.5 w-3.5 mr-1.5" />
+          <Plus className="h-3.5 w-3.5 mr-1.5" aria-hidden />
          Add address
        </Button>
      )}
@@ -135,7 +135,7 @@ function AddressCard({
  return (
    <div className="group rounded-lg border bg-muted/30 p-3 text-sm space-y-2">
      <div className="flex items-center gap-2">
-        <MapPin className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+        <MapPin className="h-3.5 w-3.5 text-muted-foreground shrink-0" aria-hidden />
        <div className="flex-1 min-w-0">
          <InlineEditableField
            value={address.label}
@@ -168,7 +168,7 @@ function AddressCard({
          className="p-1 rounded text-muted-foreground/50 hover:text-destructive hover:bg-background/60 opacity-0 group-hover:opacity-100 transition-all"
          data-testid="address-remove-button"
        >
-          <Trash2 className="h-3.5 w-3.5" />
+          <Trash2 className="h-3.5 w-3.5" aria-hidden />
        </button>
      </div>

@@ -441,7 +441,7 @@ function NewAddressForm({
            Cancel
          </Button>
          <Button type="button" size="sm" onClick={submit} disabled={saving}>
-            {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'}
+            {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden /> : 'Save'}
          </Button>
        </div>
      </div>
--- a/src/components/shared/archive-confirm-dialog.tsx
+++ b/src/components/shared/archive-confirm-dialog.tsx
@@ -58,7 +58,7 @@ export function ArchiveConfirmDialog({
              isArchived ? '' : 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
            }
          >
-            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />}
            {action}
          </AlertDialogAction>
        </AlertDialogFooter>
--- a/src/components/shared/berth-picker.tsx
+++ b/src/components/shared/berth-picker.tsx
@@ -136,7 +136,7 @@ export function BerthPicker({
          className={cn('w-full justify-between', !value && 'text-muted-foreground')}
        >
          <span className="truncate">{selectedLabel}</span>
-          <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-[320px] p-0" align="start">
--- a/src/components/shared/client-picker.tsx
+++ b/src/components/shared/client-picker.tsx
@@ -70,7 +70,7 @@ export function ClientPicker({
          className={cn('w-full justify-between', !value && 'text-muted-foreground')}
        >
          <span className="truncate">{selectedLabel}</span>
-          <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-[320px] p-0" align="start">
--- a/src/components/shared/column-picker.tsx
+++ b/src/components/shared/column-picker.tsx
@@ -72,7 +72,7 @@ export function ColumnPicker({
            cards (no columns to pick). The desktop table view shows
            this trigger from the `sm:` breakpoint up. */}
        <Button variant="outline" size="sm" className="hidden sm:inline-flex gap-1.5 h-8">
-          <Columns3 className="h-3.5 w-3.5" />
+          <Columns3 className="h-3.5 w-3.5" aria-hidden />
          <span>Columns</span>
        </Button>
      </DropdownMenuTrigger>
@@ -102,7 +102,7 @@ export function ColumnPicker({
                  isVisible ? 'bg-primary border-primary text-primary-foreground' : 'border-border'
                }`}
              >
-                {isVisible && <Check className="h-3 w-3" />}
+                {isVisible && <Check className="h-3 w-3" aria-hidden />}
              </span>
              <span className="flex-1">{col.label}</span>
              {col.alwaysVisible && (
@@ -125,7 +125,7 @@ export function ColumnPicker({
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={onSaveView}>
-              <Bookmark className="mr-2 h-3.5 w-3.5" />
+              <Bookmark className="mr-2 h-3.5 w-3.5" aria-hidden />
              Save current view
            </DropdownMenuItem>
          </>
--- a/src/components/shared/country-combobox.tsx
+++ b/src/components/shared/country-combobox.tsx
@@ -119,7 +119,7 @@ export function CountryCombobox({
          ) : (
            <span className="truncate">{placeholder}</span>
          )}
-          <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-[280px] p-0" align="start">
--- a/src/components/shared/custom-fields-section.tsx
+++ b/src/components/shared/custom-fields-section.tsx
@@ -108,9 +108,9 @@ export function CustomFieldsSection({ entityType, entityId }: CustomFieldsSectio
        <div className="flex items-center justify-between">
          <CardTitle className="text-base">Custom Fields</CardTitle>
          {collapsed ? (
-            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            <ChevronRight className="h-4 w-4 text-muted-foreground" aria-hidden />
          ) : (
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            <ChevronDown className="h-4 w-4 text-muted-foreground" aria-hidden />
          )}
        </div>
      </CardHeader>
--- a/src/components/shared/data-table.tsx
+++ b/src/components/shared/data-table.tsx
@@ -206,11 +206,11 @@ export function DataTable<TData>({
  }

  function getSortIcon(columnId: string) {
-    if (sort?.field !== columnId) return <ArrowUpDown className="ml-1 h-3.5 w-3.5" />;
+    if (sort?.field !== columnId) return <ArrowUpDown className="ml-1 h-3.5 w-3.5" aria-hidden />;
    return sort.direction === 'asc' ? (
-      <ArrowUp className="ml-1 h-3.5 w-3.5" />
+      <ArrowUp className="ml-1 h-3.5 w-3.5" aria-hidden />
    ) : (
-      <ArrowDown className="ml-1 h-3.5 w-3.5" />
+      <ArrowDown className="ml-1 h-3.5 w-3.5" aria-hidden />
    );
  }

@@ -279,7 +279,7 @@ export function DataTable<TData>({
              <TableRow>
                <TableCell colSpan={allColumns.length} className="h-40 text-center">
                  <div className="flex items-center justify-center gap-2">
-                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" aria-hidden />
                    <span className="text-muted-foreground">Loading...</span>
                  </div>
                </TableCell>
@@ -350,7 +350,7 @@ export function DataTable<TData>({
        <ul className="lg:hidden flex flex-col gap-2">
          {isLoading ? (
            <li className="rounded-md border bg-card p-6 text-center">
-              <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+              <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" aria-hidden />
            </li>
          ) : rows.length === 0 ? (
            <li className="rounded-md border bg-card p-6 text-center text-sm text-muted-foreground">
--- a/src/components/shared/detail-layout.tsx
+++ b/src/components/shared/detail-layout.tsx
@@ -32,7 +32,7 @@ export function DetailLayout({ header, tabs, defaultTab, isLoading, actions }: D
  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden />
      </div>
    );
  }
--- a/src/components/shared/empty-state.tsx
+++ b/src/components/shared/empty-state.tsx
@@ -24,7 +24,7 @@ export function EmptyState({ icon: Icon, title, description, action, className }
    >
      {Icon && (
        <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
-          <Icon className="w-6 h-6 text-muted-foreground" />
+          <Icon className="w-6 h-6 text-muted-foreground" aria-hidden />
        </div>
      )}
      <h3 className="text-base font-semibold text-foreground mb-1">{title}</h3>
--- a/src/components/shared/filter-bar.tsx
+++ b/src/components/shared/filter-bar.tsx
@@ -98,14 +98,14 @@ export function FilterBar({ filters, values, onChange, onClear }: FilterBarProps
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" size="sm" className="h-8">
-            <Filter className="mr-1.5 h-3.5 w-3.5" />
+            <Filter className="mr-1.5 h-3.5 w-3.5" aria-hidden />
            Filters
            {activeCount > 0 && (
              <Badge variant="secondary" className="ml-1.5 px-1.5 py-0 text-xs">
                {activeCount}
              </Badge>
            )}
-            <ChevronDown className="ml-1 h-3.5 w-3.5" />
+            <ChevronDown className="ml-1 h-3.5 w-3.5" aria-hidden />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-80 p-4" align="start">
--- a/src/components/shared/image-cropper-dialog.tsx
+++ b/src/components/shared/image-cropper-dialog.tsx
@@ -131,7 +131,7 @@ export function ImageCropperDialog({
          <Button onClick={handleUpload} disabled={uploading || !pixels}>
            {uploading ? (
              <>
-                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" aria-hidden />
                Uploading…
              </>
            ) : (
--- a/src/components/shared/inline-country-field.tsx
+++ b/src/components/shared/inline-country-field.tsx
@@ -72,7 +72,7 @@ export function InlineCountryField({
            if (open) pickedRef.current = false;
          }}
        />
-        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden />}
      </div>
    );
  }
@@ -98,7 +98,10 @@ export function InlineCountryField({
        {display ?? emptyText}
      </span>
      {!disabled && (
-        <Pencil className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-50" />
+        <Pencil
+          className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-50"
+          aria-hidden
+        />
      )}
    </button>
  );
--- a/src/components/shared/inline-editable-field.tsx
+++ b/src/components/shared/inline-editable-field.tsx
@@ -145,7 +145,7 @@ function InlineEditableFieldBody(props: InlineEditableFieldProps) {
            ))}
          </SelectContent>
        </Select>
-        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden />}
      </div>
    );
  }
@@ -175,7 +175,7 @@ function InlineEditableFieldBody(props: InlineEditableFieldProps) {
          disabled={saving || disabled}
          className="h-8 text-sm w-auto"
        />
-        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden />}
      </div>
    );
  }
@@ -219,7 +219,7 @@ function InlineEditableFieldBody(props: InlineEditableFieldProps) {
          rows={props.rows ?? 4}
          className="text-sm"
        />
-        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden />}
      </div>
    );
  }
@@ -260,7 +260,7 @@ function InlineEditableFieldBody(props: InlineEditableFieldProps) {
        disabled={saving}
        className="h-7 text-sm"
      />
-      {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+      {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden />}
    </div>
  );
 }
--- a/src/components/shared/inline-phone-field.tsx
+++ b/src/components/shared/inline-phone-field.tsx
@@ -115,7 +115,7 @@ export function InlinePhoneField({
              'transition-colors hover:bg-primary/90 disabled:opacity-50',
            )}
          >
-            {saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}
+            {saving ? <Loader2 className="size-3.5 animate-spin" aria-hidden /> : 'Save'}
          </button>
        </div>
      </div>
@@ -146,7 +146,10 @@ export function InlinePhoneField({
        {display ?? emptyText}
      </span>
      {!disabled && (
-        <Pencil className="h-3 w-3 opacity-20 transition-opacity group-hover:opacity-60" />
+        <Pencil
+          className="h-3 w-3 opacity-20 transition-opacity group-hover:opacity-60"
+          aria-hidden
+        />
      )}
    </button>
  );
--- a/src/components/shared/inline-tag-editor.tsx
+++ b/src/components/shared/inline-tag-editor.tsx
@@ -91,7 +91,7 @@ export function InlineTagEditor({
              variant="ghost"
              className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
            >
-              <Plus className="h-3 w-3 mr-1" />
+              <Plus className="h-3 w-3 mr-1" aria-hidden />
              {currentTags.length === 0 ? 'Add tag' : 'Add'}
            </Button>
          </PopoverTrigger>
@@ -119,7 +119,7 @@ export function InlineTagEditor({
                      style={{ backgroundColor: t.color }}
                    />
                    <span className="flex-1 truncate">{t.name}</span>
-                    {checked && <Check className="h-3.5 w-3.5 text-primary" />}
+                    {checked && <Check className="h-3.5 w-3.5 text-primary" aria-hidden />}
                  </button>
                );
              })}
--- a/src/components/shared/inline-timezone-field.tsx
+++ b/src/components/shared/inline-timezone-field.tsx
@@ -71,7 +71,7 @@ export function InlineTimezoneField({
            if (open) pickedRef.current = false;
          }}
        />
-        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden />}
      </div>
    );
  }
@@ -95,7 +95,10 @@ export function InlineTimezoneField({
        {display ?? emptyText}
      </span>
      {!disabled && (
-        <Pencil className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-50" />
+        <Pencil
+          className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-50"
+          aria-hidden
+        />
      )}
    </button>
  );
--- a/src/components/shared/interest-picker.tsx
+++ b/src/components/shared/interest-picker.tsx
@@ -95,7 +95,7 @@ export function InterestPicker({
          className={cn('w-full justify-between', !value && 'text-muted-foreground')}
        >
          <span className="truncate">{selectedLabel}</span>
-          <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-[320px] p-0" align="start">
--- a/src/components/shared/loading-skeleton.tsx
+++ b/src/components/shared/loading-skeleton.tsx
@@ -42,14 +42,14 @@ export function CardSkeleton({ className }: LoadingSkeletonProps) {
  return (
    <div className={cn('border border-border rounded-lg p-5 space-y-3 bg-background', className)}>
      <div className="flex items-center justify-between">
-        <Skeleton className="h-5 w-1/3" />
-        <Skeleton className="h-5 w-16 rounded-full" />
+        <Skeleton className="h-5 w-1/3" aria-hidden />
+        <Skeleton className="h-5 w-16 rounded-full" aria-hidden />
      </div>
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-4/5" />
+      <Skeleton className="h-4 w-full" aria-hidden />
+      <Skeleton className="h-4 w-4/5" aria-hidden />
      <div className="pt-2 flex gap-2">
-        <Skeleton className="h-8 w-20 rounded-md" />
-        <Skeleton className="h-8 w-20 rounded-md" />
+        <Skeleton className="h-8 w-20 rounded-md" aria-hidden />
+        <Skeleton className="h-8 w-20 rounded-md" aria-hidden />
      </div>
    </div>
  );
@@ -63,13 +63,13 @@ export function FormSkeleton({ fields = 4 }: { fields?: number }) {
    <div className="space-y-5">
      {Array.from({ length: fields }).map((_, i) => (
        <div key={i} className="space-y-1.5">
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-9 w-full rounded-md" />
+          <Skeleton className="h-4 w-24" aria-hidden />
+          <Skeleton className="h-9 w-full rounded-md" aria-hidden />
        </div>
      ))}
      <div className="flex gap-3 pt-2">
-        <Skeleton className="h-9 w-24 rounded-md" />
-        <Skeleton className="h-9 w-20 rounded-md" />
+        <Skeleton className="h-9 w-24 rounded-md" aria-hidden />
+        <Skeleton className="h-9 w-20 rounded-md" aria-hidden />
      </div>
    </div>
  );
@@ -97,10 +97,10 @@ export function PageSkeleton() {
      {/* Page header */}
      <div className="flex items-center justify-between">
        <div className="space-y-1.5">
-          <Skeleton className="h-7 w-48" />
-          <Skeleton className="h-4 w-72" />
+          <Skeleton className="h-7 w-48" aria-hidden />
+          <Skeleton className="h-4 w-72" aria-hidden />
        </div>
-        <Skeleton className="h-9 w-28 rounded-md" />
+        <Skeleton className="h-9 w-28 rounded-md" aria-hidden />
      </div>
      {/* Content */}
      <TableSkeleton />
--- a/src/components/shared/notes-list.tsx
+++ b/src/components/shared/notes-list.tsx
@@ -217,9 +217,9 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
            onClick={() => createMutation.mutate(newNote.trim())}
          >
            {createMutation.isPending ? (
-              <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+              <Loader2 className="mr-1.5 h-4 w-4 animate-spin" aria-hidden />
            ) : (
-              <Send className="mr-1.5 h-4 w-4" />
+              <Send className="mr-1.5 h-4 w-4" aria-hidden />
            )}
            Add Note
          </Button>
@@ -280,7 +280,7 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
                        {SOURCE_LABEL[note.source]} · {note.sourceLabel}
                      </span>
                    )}
-                  {note.isLocked && <Lock className="h-3 w-3 text-muted-foreground" />}
+                  {note.isLocked && <Lock className="h-3 w-3 text-muted-foreground" aria-hidden />}
                  {canEdit(note) && (
                    <span className="text-xs text-muted-foreground">{getTimeRemaining(note)}</span>
                  )}
@@ -322,7 +322,7 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
                      setEditContent(note.content);
                    }}
                  >
-                    <Pencil className="h-3.5 w-3.5" />
+                    <Pencil className="h-3.5 w-3.5" aria-hidden />
                  </Button>
                  <Button
                    variant="ghost"
@@ -330,7 +330,7 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
                    className="h-7 w-7 text-destructive"
                    onClick={() => deleteMutation.mutate(note.id)}
                  >
-                    <Trash2 className="h-3.5 w-3.5" />
+                    <Trash2 className="h-3.5 w-3.5" aria-hidden />
                  </Button>
                </div>
              )}
--- a/src/components/shared/owner-picker.tsx
+++ b/src/components/shared/owner-picker.tsx
@@ -121,7 +121,7 @@ export function OwnerPicker({
            )}
            {selectedLabel}
          </span>
-          <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-[320px] p-0" align="start">
--- a/src/components/shared/saved-views-dropdown.tsx
+++ b/src/components/shared/saved-views-dropdown.tsx
@@ -35,7 +35,7 @@ export function SavedViewsDropdown({ entityType, onApplyView }: SavedViewsDropdo
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="h-8">
-          <Bookmark className="mr-1.5 h-3.5 w-3.5" />
+          <Bookmark className="mr-1.5 h-3.5 w-3.5" aria-hidden />
          Views
        </Button>
      </DropdownMenuTrigger>
@@ -54,7 +54,9 @@ export function SavedViewsDropdown({ entityType, onApplyView }: SavedViewsDropdo
          >
            <span className="truncate">{view.name}</span>
            <div className="flex items-center gap-1">
-              {activeViewId === view.id && <Check className="h-3.5 w-3.5 text-primary" />}
+              {activeViewId === view.id && (
+                <Check className="h-3.5 w-3.5 text-primary" aria-hidden />
+              )}
              <button
                className="p-0.5 rounded hover:bg-muted"
                onClick={(e) => {
@@ -62,7 +64,7 @@ export function SavedViewsDropdown({ entityType, onApplyView }: SavedViewsDropdo
                  deleteView(view.id);
                }}
              >
-                <Trash2 className="h-3 w-3 text-muted-foreground" />
+                <Trash2 className="h-3 w-3 text-muted-foreground" aria-hidden />
              </button>
            </div>
          </DropdownMenuItem>
--- a/src/components/shared/send-document-dialog.tsx
+++ b/src/components/shared/send-document-dialog.tsx
@@ -241,7 +241,7 @@ function SendDocumentDialogInner({
            )}
            {previewQuery.isLoading && canPreview && (
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Loader2 className="h-4 w-4 animate-spin" /> Rendering preview…
+                <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> Rendering preview…
              </div>
            )}
          </div>
@@ -284,7 +284,9 @@ function SendDocumentDialogInner({
                Back
              </Button>
              <Button onClick={() => sendMutation.mutate()} disabled={!canSend}>
-                {sendMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {sendMutation.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
+                )}
                Confirm and send
              </Button>
            </>
--- a/src/components/shared/subdivision-combobox.tsx
+++ b/src/components/shared/subdivision-combobox.tsx
@@ -87,7 +87,7 @@ export function SubdivisionCombobox({
          data-testid={testId}
        >
          <span className="truncate text-sm">{triggerLabel}</span>
-          <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-[320px] p-0" align="start">
--- a/src/components/shared/tag-picker.tsx
+++ b/src/components/shared/tag-picker.tsx
@@ -74,7 +74,7 @@ export function TagPicker({
                ? `${selectedIds.length} tag${selectedIds.length > 1 ? 's' : ''} selected`
                : placeholder}
            </span>
-            <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-popover-trigger-width) p-0" align="start">
--- a/src/components/shared/timezone-combobox.tsx
+++ b/src/components/shared/timezone-combobox.tsx
@@ -94,7 +94,7 @@ export function TimezoneCombobox({
          data-testid={testId}
        >
          <span className="truncate text-sm">{selectedLabel}</span>
-          <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-[360px] p-0" align="start">