Icon buttons get their accessible name; the chat's close is "Close chat"

frontend/src/buttons/CopyIconButton.tsx

@@ -56,6 +56,9 @@ export const CopyIconButton = React.forwardRef<HTMLButtonElement, CopyButtonProp
 
     const onClose = () => setOpen(false)
 
+    // The name stays the ACTION ("Copy command") while the tooltip flashes the status: a control
+    // renamed "Copied!" for 800ms is one a screen reader or voice control can no longer find.
+    const label = props.label ?? (typeof title === 'string' ? title : undefined)
     title = clipboard.copied ? 'Copied!' : title
 
     return (
@@ -66,6 +69,7 @@ export const CopyIconButton = React.forwardRef<HTMLButtonElement, CopyButtonProp
           onClick={check}
           color={clipboard.copied ? colorCopied : props.color}
           icon={clipboard.copied ? 'check' : icon}
+          label={label}
           title={title}
           size={size}
         />

frontend/src/buttons/IconButton.tsx

@@ -7,7 +7,14 @@ type VariantType = 'text' | 'contained' | 'outlined'
 
 export type ButtonProps = Omit<IconProps, 'title'> & {
   to?: string
+  /** The tooltip. A STRING title is also the button's accessible name — unless `label` says
+   *  otherwise (a title that is a React node, or one that swaps in an explanation). */
   title?: React.ReactNode
+  /** The control's stable accessible name, for when `title` cannot be it: a node title
+   *  (ServiceKeySetting's "Get the Node.js package" + launch icon), or a title that changes to
+   *  a disabled-state explanation ("Manage permission required…") — which must not become
+   *  the name of what the button DOES. */
+  label?: string
   forceTitle?: boolean
   icon?: string
   name?: string
@@ -35,6 +42,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       to,
       sx = {},
       title,
+      label,
       forceTitle,
       icon,
       name,
@@ -107,6 +115,11 @@ export const IconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const button = (
       <MuiIconButton
         {...{ ref, disabled, onMouseDown, onMouseEnter, onMouseLeave, className }}
+        // Name the BUTTON. The Tooltip below wraps a <span> around it, so MUI's own aria-label
+        // landed on the span — a wrapper nothing focuses or reads — and every icon button in the
+        // app was nameless to assistive tech and to the e2e suite's getByRole('button', { name }).
+        // `label` wins; otherwise a string title is the name; a node title names nothing here.
+        aria-label={label ?? (typeof title === 'string' ? title : undefined)}
         sx={updatedSx}
         size={buttonBaseSize}
         onClick={clickHandler}

frontend/src/components/Chat/ChatPanel.tsx

@@ -150,7 +150,10 @@ export const ChatPanel: React.FC = () => {
           />
         )}
         <NewChatButton />
-        <IconButton icon="times" title={t('chat.close', 'Close')} onClick={() => dispatch.chat.set({ open: false })} />
+        {/* "Close chat", not "Close": the title is this icon-only button's accessible name, and a
+            bare "Close" is ambiguous beside every other close on the page — for a screen reader,
+            and for the e2e suite, which dismisses a docked chat by that name (helpers/app.ts). */}
+        <IconButton icon="times" title={t('chat.closeChat', 'Close chat')} onClick={() => dispatch.chat.set({ open: false })} />
       </ChatHeader>
       <ChatBody />
     </Box>

frontend/src/components/ProductsActionBar.tsx

@@ -69,6 +69,7 @@ export const ProductsActionBar: React.FC<Props> = ({ select }) => {
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <ConfirmIconButton
             icon="trash"
+            label={t('productsActionBar.deleteSelected', 'Delete selected')}
             title={
               admin
                 ? t('productsActionBar.deleteSelected', 'Delete selected')

frontend/src/components/RegisterMenu.tsx

@@ -70,6 +70,7 @@ export const RegisterMenu: React.FC<Props> = ({ fab, buttonSize = 38, sidebar, .
             '&.Mui-disabled': { backgroundColor: 'white.main', color: 'gray.main' },
           }),
         }}
+        label={t('registerMenu.addDevice', 'Add device')}
         title={
           unauthorized
             ? t(

frontend/src/components/ServiceKeySetting.tsx

@@ -101,6 +101,7 @@ export const ServiceKeySetting: React.FC<Props> = ({ connection, service, permis
                 <IconButton
                   type="brands"
                   name="github"
+                  label={t('serviceKeySetting.nodePackage', 'Get the Node.js package')}
                   title={
                     <>
                       {t('serviceKeySetting.nodePackage', 'Get the Node.js package')}

frontend/src/i18n/locales/de/app.json

@@ -293,6 +293,7 @@
   "chat": {
     "approve": "",
     "close": "",
+    "closeChat": "",
     "deleteConfirmAction": "",
     "deleteConfirmTitle": "",
     "deleteConversation": "",

frontend/src/i18n/locales/en/app.json

@@ -293,6 +293,7 @@
   "chat": {
     "approve": "Approve",
     "close": "Close",
+    "closeChat": "Close chat",
     "deleteConfirmAction": "Delete",
     "deleteConfirmTitle": "Delete this conversation?",
     "deleteConversation": "Delete",

frontend/src/i18n/locales/es/app.json

@@ -296,6 +296,7 @@
   "chat": {
     "approve": "",
     "close": "",
+    "closeChat": "",
     "deleteConfirmAction": "",
     "deleteConfirmTitle": "",
     "deleteConversation": "",

frontend/src/i18n/locales/ja/app.json

@@ -290,6 +290,7 @@
   "chat": {
     "approve": "",
     "close": "",
+    "closeChat": "",
     "deleteConfirmAction": "",
     "deleteConfirmTitle": "",
     "deleteConversation": "",

frontend/src/pages/ScriptEditPage.tsx

@@ -169,6 +169,7 @@ export const ScriptEditPage: React.FC<Props> = ({ isNew }) => {
       {!!editForm?.script && !loading && (
         <IconButton
           name={copied ? 'check' : 'copy'}
+          label={t('scriptEditPage.copyScript', 'Copy Script')} // the name stays the action while the tooltip flashes the status
           title={copied ? t('scriptEditPage.copied', 'Copied!') : t('scriptEditPage.copyScript', 'Copy Script')}
           color={copied ? 'success' : 'grayDark'}
           size="sm"