From 4e0f1d911c249a4257d42f4ae3ddb9b496ffebdf Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Tue, 27 Oct 2026 23:07:11 -0700
Subject: [PATCH] Take ConfirmButton's icon as a plain icon

The icon is read out by the button's name, as a text button with a
short label already is, in place of an { icon, label } pair.
---
 .../src/features/settings/pages/ApiKeySettings.tsx  |  3 ++-
 apps/web/src/shared/ui/SettingsPage.tsx             | 13 ++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/features/settings/pages/ApiKeySettings.tsx b/apps/web/src/features/settings/pages/ApiKeySettings.tsx
index 95c0317..e24a565 100644
--- a/apps/web/src/features/settings/pages/ApiKeySettings.tsx
+++ b/apps/web/src/features/settings/pages/ApiKeySettings.tsx
@@ -129,7 +129,8 @@ function ApiKeyRow(props: ApiKeyRowProps) {
       <ConfirmButton
         label="Delete key"
         question="Delete this key?"
-        icon={{ icon: <TrashIcon />, label: `Delete ${label}` }}
+        name={`Delete ${label}`}
+        icon={<TrashIcon />}
         onConfirm={props.onDelete}
       />
     </ItemList.LinkItem>
diff --git a/apps/web/src/shared/ui/SettingsPage.tsx b/apps/web/src/shared/ui/SettingsPage.tsx
index 69899d8..33e7316 100644
--- a/apps/web/src/shared/ui/SettingsPage.tsx
+++ b/apps/web/src/shared/ui/SettingsPage.tsx
@@ -487,7 +487,10 @@ function SaveStatus(props: SaveStatusProps) {
 interface ConfirmProps {
   /** What the button does, such as "Delete role". The confirming button says it again. */
   label: string
-  /** What the button is read out as until asked, when its label is too short to say what it acts on. */
+  /**
+   * What the button is read out as until asked, when its label is too short to say what it acts on,
+   * or it shows only an icon.
+   */
   name?: string
   /** The question asked before it happens, such as "Delete this role?" */
   question: string
@@ -498,8 +501,8 @@ interface ConfirmProps {
    * that loses nothing for good, as rebuilding this device's copy. Only the confirming button is red.
    */
   tone?: 'quiet' | 'default'
-  /** An icon to show in place of the label until asked, with what it is read out as. */
-  icon?: { icon: ReactNode; label: string }
+  /** An icon to show in place of the label until asked, read out as its name. */
+  icon?: ReactNode
 }
 
 /** A button for something that can't be undone, which asks in place before doing it. */
@@ -515,11 +518,11 @@ export function ConfirmButton(props: ConfirmProps) {
     return (
       <IconButton
         tone="danger"
-        aria-label={props.icon.label}
+        aria-label={props.name ?? props.label}
         disabled={props.disabled}
         onClick={ask}
       >
-        {props.icon.icon}
+        {props.icon}
       </IconButton>
     )
   if (!asking)
-- 
knotmirror 0.0.1