Merge pull request #219 from mieweb/accessibility/a11y-button-labels

a11y: add aria-label to icon-only buttons

Author: garrity-miepub

src/components/AI/AIChat.tsx

@@ -383,6 +383,7 @@ export function AIChat({
                 data-slot="ai-chat-header-action"
                 className="rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
                 title="Clear chat"
+                aria-label="Clear chat"
               >
                 <RefreshIcon />
               </button>

src/components/AuthDialog/AuthDialog.tsx

@@ -461,6 +461,7 @@ function LoginForm({ onSubmit, isLoading, onForgotPassword }: LoginFormProps) {
             type="button"
             onClick={() => setShowPassword(!showPassword)}
             className="text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2 hover:text-gray-700"
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
           >
             {showPassword ? (
               <EyeOffIcon className="h-4 w-4" />
@@ -569,6 +570,7 @@ function SignupForm({
             type="button"
             onClick={() => setShowPassword(!showPassword)}
             className="text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2 hover:text-gray-700"
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
           >
             {showPassword ? (
               <EyeOffIcon className="h-4 w-4" />
@@ -751,6 +753,7 @@ function ResetPasswordForm({ onSubmit, isLoading }: ResetPasswordFormProps) {
             type="button"
             onClick={() => setShowPassword(!showPassword)}
             className="text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2 hover:text-gray-700"
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
           >
             {showPassword ? (
               <EyeOffIcon className="h-4 w-4" />

src/components/CommandPalette/CommandPalette.tsx

@@ -321,6 +321,7 @@ export function CommandPalette({
                 onClick={() => setQuery('')}
                 data-testid={`${testId}-clear`}
                 className="text-muted-foreground absolute top-1/2 right-12 -translate-y-1/2 hover:text-gray-700 dark:hover:text-gray-200"
+                aria-label="Clear search"
               >
                 <XIcon />
               </button>

src/components/NotificationCenter/NotificationCenter.tsx

@@ -393,6 +393,7 @@ export function NotificationCenter({
                           variant="ghost"
                           size="sm"
                           className="h-auto p-1 text-xs opacity-0 group-hover:opacity-100"
+                          aria-label="Dismiss notification"
                           onClick={(e) => {
                             e.stopPropagation();
                             onDismiss(notification.id);

src/components/OnboardingWizard/OnboardingWizard.tsx

@@ -221,6 +221,7 @@ export function OnboardingWizard({
                 variant="outline"
                 onClick={handleBack}
                 disabled={!backEnabled || isFirstStep}
+                aria-label={back}
               >
                 <span className="hidden sm:inline">{back}</span>
                 <i className="fas fa-chevron-left sm:hidden" />
@@ -243,6 +244,7 @@ export function OnboardingWizard({
                 variant="primary"
                 onClick={handleNext}
                 disabled={!nextEnabled && !isLastStep}
+                aria-label={isLastStep ? finish : next}
               >
                 <span className="hidden sm:inline">
                   {isLastStep ? finish : next}

src/components/ServiceCard/ServiceCard.tsx

@@ -213,6 +213,7 @@ export function ServiceCard({
                     onClick={handleDeleteClick}
                     className="text-muted-foreground hover:text-destructive p-1.5 transition-colors"
                     title="Delete service"
+                    aria-label="Delete service"
                   >
                     <Trash2 className="h-4 w-4" />
                   </button>
@@ -223,6 +224,7 @@ export function ServiceCard({
                     onClick={handleEditClick}
                     className="text-muted-foreground hover:text-primary p-1.5 transition-colors"
                     title="Edit service"
+                    aria-label="Edit service"
                   >
                     <Pencil className="h-4 w-4" />
                   </button>

src/components/Sidebar/Sidebar.tsx

@@ -364,6 +364,7 @@ export function SidebarNavGroup({
           showCollapsed && 'justify-center'
         )}
         title={showCollapsed ? label : undefined}
+        aria-label={showCollapsed ? label : undefined}
       >
         {icon && (
           <span
@@ -509,6 +510,7 @@ export function SidebarNavItem({
         data-testid={testId}
         className={baseClasses}
         title={showCollapsed ? label : undefined}
+        aria-label={showCollapsed ? label : undefined}
       >
         {content}
       </a>
@@ -523,6 +525,7 @@ export function SidebarNavItem({
       data-testid={testId}
       className={baseClasses}
       title={showCollapsed ? label : undefined}
+      aria-label={showCollapsed ? label : undefined}
     >
       {content}
     </button>