From 6ea6f11a7d2087292fc22921fd24e6083ff95e80 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 10 May 2026 16:59:44 +0100
Subject: [PATCH] Label more icon-only buttons for screen readers

Continues the labelling sweep: close X buttons in
UpdateConfirmationModal, ChangePasswordModal, SuggestProfileModal,
UserAssignmentsDialog, the Patrol configuration popover, the Toast
dismiss control, the SSO provider test result and metadata preview
dismiss buttons, and the compact ContainerUpdateBadge button (which
becomes icon-only when compact). Each gets aria-label + title; the
inline SVG icons get aria-hidden so the button label is the only
announced text.
---
 .../src/components/Settings/ChangePasswordModal.tsx           | 4 +++-
 frontend-modern/src/components/Settings/SSOProvidersPanel.tsx | 4 ++++
 .../src/components/Settings/SuggestProfileModal.tsx           | 4 +++-
 .../src/components/Settings/UserAssignmentsDialog.tsx         | 2 ++
 frontend-modern/src/components/Toast/Toast.tsx                | 4 +++-
 frontend-modern/src/components/UpdateConfirmationModal.tsx    | 4 +++-
 .../src/components/shared/ContainerUpdateBadge.tsx            | 1 +
 .../src/features/patrol/PatrolIntelligenceHeader.tsx          | 2 ++
 8 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
index 5aead9777..e7ae85efd 100644
--- a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
+++ b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
@@ -112,9 +112,11 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
             type="button"
             onClick={handleClose}
             disabled={loading()}
+            aria-label="Close password dialog"
+            title="Close"
             class="text-slate-400 hover:text-muted disabled:opacity-50"
           >
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
diff --git a/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx b/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx
index f96964bff..88866847a 100644
--- a/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx
+++ b/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx
@@ -531,6 +531,8 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={() => setTestResult(null)}
+                      aria-label="Dismiss test result"
+                      title="Dismiss"
                       class="text-slate-400 hover:text-base-content"
                     >
                       <X class="w-4 h-4" />
@@ -687,6 +689,8 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
               <button
                 type="button"
                 onClick={() => setShowMetadataPreview(false)}
+                aria-label="Close metadata preview"
+                title="Close"
                 class="text-slate-400 hover:text-base-content"
               >
                 <X class="w-5 h-5" />
diff --git a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
index 2f3f5d7b2..a4564bec9 100644
--- a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
+++ b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
@@ -238,9 +238,11 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
           <button
             type="button"
             onClick={props.onClose}
+            aria-label="Close profile suggestion dialog"
+            title="Close"
             class="p-1.5 rounded-md text-slate-500 hover:text-base-content hover:bg-surface-hover"
           >
-            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
diff --git a/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx b/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx
index 6dd8640e3..e894a6a92 100644
--- a/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx
+++ b/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx
@@ -40,6 +40,8 @@ export const UserAssignmentsDialog: Component<UserAssignmentsDialogProps> = (pro
           <button
             type="button"
             onClick={props.onClose}
+            aria-label="Close user assignments"
+            title="Close"
             class="p-1.5 rounded-md hover:text-base-content hover:bg-surface-hover"
           >
             <X class="w-5 h-5" />
diff --git a/frontend-modern/src/components/Toast/Toast.tsx b/frontend-modern/src/components/Toast/Toast.tsx
index fa269cfd9..651887ab9 100644
--- a/frontend-modern/src/components/Toast/Toast.tsx
+++ b/frontend-modern/src/components/Toast/Toast.tsx
@@ -138,9 +138,11 @@ export const Toast: Component<ToastProps> = (props) => {
         <button
           type="button"
           onClick={handleClose}
+          aria-label="Dismiss notification"
+          title="Dismiss"
           class="flex-shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200"
         >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
diff --git a/frontend-modern/src/components/UpdateConfirmationModal.tsx b/frontend-modern/src/components/UpdateConfirmationModal.tsx
index 409783711..831dfe358 100644
--- a/frontend-modern/src/components/UpdateConfirmationModal.tsx
+++ b/frontend-modern/src/components/UpdateConfirmationModal.tsx
@@ -50,11 +50,13 @@ export function UpdateConfirmationModal(props: UpdateConfirmationModalProps) {
             <h2 class="text-xl font-semibold text-base-content">Confirm Update</h2>
             <button
               onClick={handleClose}
+              aria-label="Close confirmation"
+              title="Close"
               class=" hover:text-base-content"
               disabled={props.isApplying}
               type="button"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
diff --git a/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx b/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx
index 786117bee..089c3e9d3 100644
--- a/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx
+++ b/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx
@@ -168,6 +168,7 @@ export const UpdateButton: Component<UpdateButtonProps> = (props) => {
               e.stopPropagation();
             }}
             disabled={state.isButtonDisabled()}
+            aria-label={state.buttonTooltip() || state.buttonLabel()}
             data-prevent-toggle
             onMouseEnter={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();
diff --git a/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx b/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx
index 554d4957f..d20d897cb 100644
--- a/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx
+++ b/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx
@@ -257,6 +257,8 @@ export function PatrolIntelligenceHeader(props: { state: PatrolIntelligenceState
                     </h4>
                     <button
                       onClick={() => state.setShowAdvancedSettings(false)}
+                      aria-label="Close patrol configuration"
+                      title="Close"
                       class="p-1 rounded-md hover:text-base-content hover:bg-surface-hover transition-colors"
                     >
                       <XIcon class="w-4 h-4" />