From b16b149792af2a4ccdf4b8757d764b77ce415264 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Tue, 28 Jul 2026 11:44:10 -0700
Subject: [PATCH 1/9] fix a11y issues

---
 .../connectionStrings/components/commandBar.tsx   |  2 ++
 .../components/connectionStringsView.tsx          | 11 ++++++++++-
 src/app/constants/fluentV9Theme.ts                | 15 ++++++++++++++-
 src/app/css/_header.scss                          |  3 +++
 src/app/css/_notification.scss                    |  3 +++
 src/app/css/_themes.scss                          |  6 +++---
 .../deviceList/components/deviceQueryClause.tsx   |  4 ++--
 .../components/notificationListEntry.tsx          |  4 ++--
 src/app/shared/components/commandBarV9.tsx        |  2 ++
 src/app/shared/components/copyButton.tsx          |  4 +++-
 src/localization/locales/en.json                  |  7 +++++--
 src/localization/resourceKeys.ts                  |  5 ++++-
 12 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/app/connectionStrings/components/commandBar.tsx b/src/app/connectionStrings/components/commandBar.tsx
index a9f3c562..d47d5b09 100644
--- a/src/app/connectionStrings/components/commandBar.tsx
+++ b/src/app/connectionStrings/components/commandBar.tsx
@@ -9,6 +9,7 @@ import { useAuthenticationStateContext } from '../../authentication/context/auth
 
 interface ConnectionStringCommandBarProps {
     onAddConnectionStringClick: () => void;
+    addButtonRef?: React.Ref<HTMLButtonElement>;
 }
 
 export const ConnectionStringCommandBar: React.FC<ConnectionStringCommandBarProps> = props => {
@@ -25,6 +26,7 @@ export const ConnectionStringCommandBar: React.FC<ConnectionStringCommandBarProp
             items={[
                 {
                     ariaLabel: t(ResourceKeys.connectionStrings.addConnectionCommand.ariaLabel),
+                    buttonRef: props.addButtonRef,
                     disabled: state.payload.length >= CONNECTION_STRING_LIST_MAX_LENGTH,
                     icon: <AddRegular />,
                     key: 'add',
diff --git a/src/app/connectionStrings/components/connectionStringsView.tsx b/src/app/connectionStrings/components/connectionStringsView.tsx
index 3c3fb751..a000399d 100644
--- a/src/app/connectionStrings/components/connectionStringsView.tsx
+++ b/src/app/connectionStrings/components/connectionStringsView.tsx
@@ -29,6 +29,7 @@ export const ConnectionStringsView: React.FC = () => {
     useBreadcrumbEntry({name: t(ResourceKeys.breadcrumb.resources)});
     const [ state, api ] = useConnectionStringContext();
     const [ connectionStringUnderEdit, setConnectionStringUnderEdit ] = React.useState<string>(undefined);
+    const addButtonRef = React.useRef<HTMLButtonElement>(null);
 
     const connectionStringsWithExpiry = state.payload;
     const synchronizationStatus = state.synchronizationStatus;
@@ -64,12 +65,20 @@ export const ConnectionStringsView: React.FC = () => {
     };
 
     const onConnectionStringEditCommit = (connectionString: string) => {
+        const wasAdding = connectionStringUnderEdit === '';
         onUpsertConnectionString(connectionString, connectionStringUnderEdit);
         setConnectionStringUnderEdit(undefined);
+        if (wasAdding) {
+            addButtonRef.current?.focus();
+        }
     };
 
     const onConnectionStringEditDismiss = () => {
+        const wasAdding = connectionStringUnderEdit === '';
         setConnectionStringUnderEdit(undefined);
+        if (wasAdding) {
+            addButtonRef.current?.focus();
+        }
     };
 
     React.useEffect(() => {
@@ -95,7 +104,7 @@ export const ConnectionStringsView: React.FC = () => {
 
     return (
         <div>
-            <ConnectionStringCommandBar onAddConnectionStringClick={onAddConnectionStringClick}/>
+            <ConnectionStringCommandBar onAddConnectionStringClick={onAddConnectionStringClick} addButtonRef={addButtonRef}/>
             <div className="connection-strings">
                 {connectionStringsWithExpiry.map(connectionStringWithExpiry =>
                     <ConnectionString
diff --git a/src/app/constants/fluentV9Theme.ts b/src/app/constants/fluentV9Theme.ts
index 9cfd302a..86f4de74 100644
--- a/src/app/constants/fluentV9Theme.ts
+++ b/src/app/constants/fluentV9Theme.ts
@@ -51,7 +51,20 @@ const darkBrand: BrandVariants = {
 };
 
 export const v9ThemeLight: Theme = createLightTheme(lightBrand);
-export const v9ThemeDark: Theme = createDarkTheme(darkBrand);
+
+// createDarkTheme(darkBrand) maps colorBrandBackground/Hover/Pressed/Selected to shades
+// 70/80/40/60 of darkBrand. Shades 70/80/60 (#4ba6d8/#5cafdd/#3d7da0) are too light to give
+// white text (colorNeutralForegroundOnBrand) sufficient contrast (~2.7:1, below the 4.5:1
+// WCAG AA minimum), which is why buttons like "Connect via IoT Hub connection string" on the
+// home screen fail contrast checks in dark mode. Override the brand background tokens with
+// darker shades from the same ramp so white text remains readable in every button state.
+export const v9ThemeDark: Theme = {
+    ...createDarkTheme(darkBrand),
+    colorBrandBackground: darkBrand[40],
+    colorBrandBackgroundHover: darkBrand[50],
+    colorBrandBackgroundPressed: darkBrand[20],
+    colorBrandBackgroundSelected: darkBrand[30],
+};
 
 // High contrast dark (white on black) — use Teams HC theme as-is
 export const v9ThemeHighContrastDark: Theme = teamsHighContrastTheme;
diff --git a/src/app/css/_header.scss b/src/app/css/_header.scss
index e41d7feb..626b9fb7 100644
--- a/src/app/css/_header.scss
+++ b/src/app/css/_header.scss
@@ -60,6 +60,9 @@
         .settings button {
             color: themed('headerButtonColor');
         }
+        .settings button:focus-visible {
+            outline-color: themed('headerButtonColor');
+        }
         .settings button svg {
             color: var(--colorBrandForeground1);
         }
diff --git a/src/app/css/_notification.scss b/src/app/css/_notification.scss
index 8cd2c2c6..3f3cad33 100644
--- a/src/app/css/_notification.scss
+++ b/src/app/css/_notification.scss
@@ -84,6 +84,9 @@
 
 .notification-toast-body {
     word-break: break-word;
+    @include themify($themes) {
+        background-color: themed('notificationBackgroundColor') !important;
+    }
 }
 
 .Toastify__toast-container {
diff --git a/src/app/css/_themes.scss b/src/app/css/_themes.scss
index 84b2616f..21a9e65e 100644
--- a/src/app/css/_themes.scss
+++ b/src/app/css/_themes.scss
@@ -85,7 +85,7 @@
     notificationWarningColor: $warningText,
     notificationInfoColor: $infoText,
     notificationTextColor: #cccccc,
-    notificationBackgroundColor: $dark-gray,
+    notificationBackgroundColor: var(--colorNeutralBackground1),
     notificationProgressBackground: $light-medium-gray,
     maskedCopyableColor: #cccccc,
     maskedCopyableReadonlyBackground: #363636,
@@ -106,9 +106,9 @@
     inputComponentBackgroundColor: $dark-gray,
     pivotOnHoverBackground: #363636,
     menuLinkBackground_Active: rgb(37, 37, 37),
-    menuLinkBackground_Hover: rgb(234, 234, 234),
+    menuLinkBackground_Hover: $dark-medium-gray,
     menuLinkBorder_Active: rgb(75, 166, 216),
-    menuLinkColor_Hover: $link-blue,
+    menuLinkColor_Hover: rgb(75, 166, 216),
     menuLinkColor: rgb(248,248,248)
   ),
   highContrastWhite: (
diff --git a/src/app/devices/deviceList/components/deviceQueryClause.tsx b/src/app/devices/deviceList/components/deviceQueryClause.tsx
index 4a504e62..612039e4 100644
--- a/src/app/devices/deviceList/components/deviceQueryClause.tsx
+++ b/src/app/devices/deviceList/components/deviceQueryClause.tsx
@@ -123,7 +123,7 @@ export const DeviceQueryClause: React.FC<DeviceQueryClauseProps & DeviceQueryCla
                         className="clause-value"
                         onOptionSelect={onValueDropdownChange}
                         placeholder={t(ResourceKeys.deviceLists.query.searchPills.clause.value.placeholder)}
-                        aria-label={t(ResourceKeys.deviceLists.query.searchPills.clause.value.placeholder)}
+                        aria-label={t(ResourceKeys.deviceLists.query.searchPills.clause.value.ariaLabel)}
                         selectedOptions={value ? [value] : []}
                     >
                         {renderEdgeDropdownOptions()}
@@ -135,7 +135,7 @@ export const DeviceQueryClause: React.FC<DeviceQueryClauseProps & DeviceQueryCla
                         className="clause-value"
                         onOptionSelect={onValueDropdownChange}
                         placeholder={t(ResourceKeys.deviceLists.query.searchPills.clause.value.placeholder)}
-                        aria-label={t(ResourceKeys.deviceLists.query.searchPills.clause.value.placeholder)}
+                        aria-label={t(ResourceKeys.deviceLists.query.searchPills.clause.value.ariaLabel)}
                         selectedOptions={value ? [value] : []}
                     >
                         {renderStatusDropdownOptions()}
diff --git a/src/app/notifications/components/notificationListEntry.tsx b/src/app/notifications/components/notificationListEntry.tsx
index d130eb3a..92dec90a 100644
--- a/src/app/notifications/components/notificationListEntry.tsx
+++ b/src/app/notifications/components/notificationListEntry.tsx
@@ -44,8 +44,8 @@ export const NotificationListEntry: React.FC<NotificationListEntryProps> = (prop
             <Button
                 appearance="subtle"
                 icon={<CopyRegular />}
-                title={t(ResourceKeys.header.notifications.copy)}
-                aria-label={t(ResourceKeys.header.notifications.copy)}
+                title={t(ResourceKeys.header.notifications.copy.label)}
+                aria-label={t(ResourceKeys.header.notifications.copy.ariaLabel, { notification: message })}
                 onClick={copyToClipboard}
                 style={buttonProps.isFlex ? {flex: '1'} : {}}
             />
diff --git a/src/app/shared/components/commandBarV9.tsx b/src/app/shared/components/commandBarV9.tsx
index 1d96f3e3..911e9acf 100644
--- a/src/app/shared/components/commandBarV9.tsx
+++ b/src/app/shared/components/commandBarV9.tsx
@@ -15,6 +15,7 @@ interface CommandBarItem {
     type?: string;
     icon?: React.ReactElement;
     onClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     subMenuProps?: {
         items: CommandBarSubMenuItem[];
     };
@@ -77,6 +78,7 @@ export const CommandBarV9: React.FC<CommandBarV9Props> = ({ items, farItems, cla
         return (
             <ToolbarButton
                 key={item.key}
+                ref={item.buttonRef}
                 aria-label={item.ariaLabel}
                 disabled={item.disabled}
                 icon={item.icon}
diff --git a/src/app/shared/components/copyButton.tsx b/src/app/shared/components/copyButton.tsx
index 01860d28..dfab5006 100644
--- a/src/app/shared/components/copyButton.tsx
+++ b/src/app/shared/components/copyButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Popover, PopoverSurface, PopoverTrigger, Text } from '@fluentui/react-components';
+import { Button, Popover, PopoverSurface, PopoverTrigger, Text, useAnnounce } from '@fluentui/react-components';
 import { CopyRegular } from '@fluentui/react-icons';
 import { ResourceKeys } from '../../../localization/resourceKeys';
 
@@ -12,6 +12,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
     const { t } = useTranslation();
     const [popoverOpen, setPopoverOpen] = React.useState<boolean>(false);
     const [calloutTextKey, setCalloutTextKey] = React.useState<string>(ResourceKeys.common.maskedCopyableTextField.copy.label);
+    const { announce } = useAnnounce();
 
     const hiddenRef = React.useRef<HTMLInputElement | null>(null);
     const focusRef = React.useRef<HTMLButtonElement | null>(null);
@@ -30,6 +31,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
             focusRef.current.focus();
         }
         setCalloutTextKey(ResourceKeys.common.maskedCopyableTextField.copied.label);
+        announce(t(ResourceKeys.common.maskedCopyableTextField.copied.label));
     };
 
     return (
diff --git a/src/localization/locales/en.json b/src/localization/locales/en.json
index 581b94a3..73beffe3 100644
--- a/src/localization/locales/en.json
+++ b/src/localization/locales/en.json
@@ -70,7 +70,10 @@
                 "redirect": "Looking for notifications?",
                 "redirectLink": "Please visit Notification Center"
             },
-            "copy": "Copy"
+            "copy": {
+                "ariaLabel": "Copy notification: {{notification}}",
+                "label": "Copy"
+            }
         },
         "questions": {
             "launch": "Open ???"
@@ -417,7 +420,7 @@
                     },
                     "value": {
                         "placeholder": "Select value",
-                        "ariaLabel": "Enter a value for this clause",
+                        "ariaLabel": "Query clause value",
                         "deviceCapability": {
                             "edge": "is Edge device",
                             "nonEdge": "is not Edge device"
diff --git a/src/localization/resourceKeys.ts b/src/localization/resourceKeys.ts
index 7a2669f2..394c3f15 100644
--- a/src/localization/resourceKeys.ts
+++ b/src/localization/resourceKeys.ts
@@ -780,7 +780,10 @@ export class ResourceKeys {
    public static header = {
       applicationName : "header.applicationName",
       notifications : {
-         copy : "header.notifications.copy",
+         copy : {
+            ariaLabel : "header.notifications.copy.ariaLabel",
+            label : "header.notifications.copy.label",
+         },
          dismiss : "header.notifications.dismiss",
          panel : {
             noNotifications : "header.notifications.panel.noNotifications",

From 156cb7dc72353f53de9536efcf1c215249e62c23 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Tue, 28 Jul 2026 11:46:58 -0700
Subject: [PATCH 2/9] increment patch version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 519e96a0..7a0d871c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "azure-iot-explorer",
-  "version": "0.15.16",
+  "version": "0.15.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "azure-iot-explorer",
-      "version": "0.15.16",
+      "version": "0.15.18",
       "license": "MIT",
       "dependencies": {
         "@azure/core-amqp": "^4.4.2",
diff --git a/package.json b/package.json
index 27e6bb5a..4d77cc88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "azure-iot-explorer",
-  "version": "0.15.17",
+  "version": "0.15.18",
   "description": "This project welcomes contributions and suggestions. Most contributions require you to agree to a\r Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\r the rights to use your contribution. For details, visit https://cla.microsoft.com.",
   "main": "host/electron.js",
   "build": {

From 98677e7e1c27bd0acabefa1806017b99569a0630 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Wed, 29 Jul 2026 10:22:05 -0700
Subject: [PATCH 3/9] announce copy button success & fix primary button
 contrast in dark mode

---
 src/app/constants/fluentV9Theme.ts            | 12 ++----
 src/app/shared/components/application.tsx     | 41 ++++++++++---------
 src/app/shared/components/copyButton.spec.tsx | 20 ++++++++-
 src/app/shared/components/copyButton.tsx      | 10 ++++-
 4 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/app/constants/fluentV9Theme.ts b/src/app/constants/fluentV9Theme.ts
index 86f4de74..c44b699b 100644
--- a/src/app/constants/fluentV9Theme.ts
+++ b/src/app/constants/fluentV9Theme.ts
@@ -52,16 +52,12 @@ const darkBrand: BrandVariants = {
 
 export const v9ThemeLight: Theme = createLightTheme(lightBrand);
 
-// createDarkTheme(darkBrand) maps colorBrandBackground/Hover/Pressed/Selected to shades
-// 70/80/40/60 of darkBrand. Shades 70/80/60 (#4ba6d8/#5cafdd/#3d7da0) are too light to give
-// white text (colorNeutralForegroundOnBrand) sufficient contrast (~2.7:1, below the 4.5:1
-// WCAG AA minimum), which is why buttons like "Connect via IoT Hub connection string" on the
-// home screen fail contrast checks in dark mode. Override the brand background tokens with
-// darker shades from the same ramp so white text remains readable in every button state.
+// Override the dark theme's primary button colors to maintain sufficient contrast with white text.
+// Uses primary button colors from Azure portal dark mode
 export const v9ThemeDark: Theme = {
     ...createDarkTheme(darkBrand),
-    colorBrandBackground: darkBrand[40],
-    colorBrandBackgroundHover: darkBrand[50],
+    colorBrandBackground: 'rgb(0, 120, 212)',
+    colorBrandBackgroundHover: 'rgb(16, 110, 190)',
     colorBrandBackgroundPressed: darkBrand[20],
     colorBrandBackgroundSelected: darkBrand[30],
 };
diff --git a/src/app/shared/components/application.tsx b/src/app/shared/components/application.tsx
index d10d0e9c..e464e3d0 100644
--- a/src/app/shared/components/application.tsx
+++ b/src/app/shared/components/application.tsx
@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import 'react-toastify/dist/ReactToastify.css';
+import { AriaLiveAnnouncer } from '@fluentui/react-components';
 import * as React from 'react';
 import { Route, Navigate, Routes } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
@@ -25,25 +26,27 @@ export const Application: React.FC = () => {
     useBreadcrumbEntry({ name: t(ResourceKeys.common.home), suffix: 'home' });
 
     return (
-        <div className="container">
-            <div className="header">
-                <Header />
+        <AriaLiveAnnouncer>
+            <div className="container">
+                <div className="header">
+                    <Header />
+                </div>
+                <div className="topnav">
+                    <Breadcrumbs/>
+                </div>
+                <main className="main">
+                    <Routes>
+                        <Route path="/" element={<Navigate to={`${ROUTE_PARTS.HOME}`} replace/>}/>
+                        <Route path={`/${ROUTE_PARTS.HOME}/*`} element={<HomeView />} />
+                        <Route path={'/microsoft.devices/*'} element={<IotHub />} />
+                        <Route path="*" element={<NoMatchError/>}/>
+                    </Routes>
+                </main>
+                <ToastContainer
+                    autoClose={NOTIFICATION_AUTO_CLOSE}
+                    toastClassName="toast-notification"
+                />
             </div>
-            <div className="topnav">
-                <Breadcrumbs/>
-            </div>
-            <main className="main">
-                <Routes>
-                    <Route path="/" element={<Navigate to={`${ROUTE_PARTS.HOME}`} replace/>}/>
-                    <Route path={`/${ROUTE_PARTS.HOME}/*`} element={<HomeView />} />
-                    <Route path={'/microsoft.devices/*'} element={<IotHub />} />
-                    <Route path="*" element={<NoMatchError/>}/>
-                </Routes>
-            </main>
-            <ToastContainer
-                autoClose={NOTIFICATION_AUTO_CLOSE}
-                toastClassName="toast-notification"
-            />
-        </div>
+        </AriaLiveAnnouncer>
     );
 };
diff --git a/src/app/shared/components/copyButton.spec.tsx b/src/app/shared/components/copyButton.spec.tsx
index 579f6e0f..086856ef 100644
--- a/src/app/shared/components/copyButton.spec.tsx
+++ b/src/app/shared/components/copyButton.spec.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { CopyButton } from './copyButton';
+import { ResourceKeys } from '../../../localization/resourceKeys';
 
 describe('copyToClipboard', () => {
     it('renders copy button', () => {
@@ -14,4 +15,21 @@ describe('copyToClipboard', () => {
         // FluentUI v9 buttons may use disabled attribute or aria-disabled
         expect(button).toBeInTheDocument();
     });
+
+    it('resets the popover text after it is dismissed', async () => {
+        render(<CopyButton copyText='text'/>);
+
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).toBeInTheDocument();
+
+        fireEvent.click(button);
+
+        await waitFor(() => {
+            expect(screen.queryByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).not.toBeInTheDocument();
+        });
+
+        fireEvent.mouseEnter(button);
+        expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copy.label)).toBeInTheDocument();
+    });
 });
\ No newline at end of file
diff --git a/src/app/shared/components/copyButton.tsx b/src/app/shared/components/copyButton.tsx
index dfab5006..6576912d 100644
--- a/src/app/shared/components/copyButton.tsx
+++ b/src/app/shared/components/copyButton.tsx
@@ -22,6 +22,14 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
         setCalloutTextKey(ResourceKeys.common.maskedCopyableTextField.copy.label);
     };
 
+    const handlePopoverOpenChange = (_event: unknown, data: { open: boolean }) => {
+        if (data.open) {
+            setPopoverOpen(true);
+        } else {
+            dismissPopover();
+        }
+    };
+
     const copyToClipboard = () => {
         if (hiddenRef.current) {
             hiddenRef.current.select();
@@ -48,7 +56,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
             />
             <Popover
                 open={popoverOpen}
-                onOpenChange={(e, data) => setPopoverOpen(data.open)}
+                onOpenChange={handlePopoverOpenChange}
                 positioning="above"
             >
                 <PopoverTrigger disableButtonEnhancement>

From 9a59ba1b28e7728b60dd54a8b65ec6e0b62d00c1 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Wed, 29 Jul 2026 11:57:34 -0700
Subject: [PATCH 4/9] remove unneeded change to menu link color

---
 src/app/css/_themes.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/css/_themes.scss b/src/app/css/_themes.scss
index 21a9e65e..2eaaa44e 100644
--- a/src/app/css/_themes.scss
+++ b/src/app/css/_themes.scss
@@ -108,7 +108,7 @@
     menuLinkBackground_Active: rgb(37, 37, 37),
     menuLinkBackground_Hover: $dark-medium-gray,
     menuLinkBorder_Active: rgb(75, 166, 216),
-    menuLinkColor_Hover: rgb(75, 166, 216),
+    menuLinkColor_Hover: $link-blue,
     menuLinkColor: rgb(248,248,248)
   ),
   highContrastWhite: (

From 990cbdbfbe2448db824d1ec6ee508c075926ca6a Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Wed, 29 Jul 2026 13:42:25 -0700
Subject: [PATCH 5/9] increment patch against latest version

---
 package-lock.json                                             | 4 ++--
 package.json                                                  | 2 +-
 .../devices/deviceList/components/deviceQueryClause.spec.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a670acb7..b408f2ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "azure-iot-explorer",
-  "version": "0.15.18",
+  "version": "0.15.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "azure-iot-explorer",
-      "version": "0.15.18",
+      "version": "0.15.19",
       "license": "MIT",
       "dependencies": {
         "@azure/core-amqp": "^4.5.0",
diff --git a/package.json b/package.json
index 13810227..9f48ab92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "azure-iot-explorer",
-  "version": "0.15.18",
+  "version": "0.15.19",
   "description": "This project welcomes contributions and suggestions. Most contributions require you to agree to a\r Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\r the rights to use your contribution. For details, visit https://cla.microsoft.com.",
   "main": "host/electron.js",
   "build": {
diff --git a/src/app/devices/deviceList/components/deviceQueryClause.spec.tsx b/src/app/devices/deviceList/components/deviceQueryClause.spec.tsx
index 6f9ce2f9..2fd725f9 100644
--- a/src/app/devices/deviceList/components/deviceQueryClause.spec.tsx
+++ b/src/app/devices/deviceList/components/deviceQueryClause.spec.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { DeviceQueryClause, DeviceQueryClauseProps } from './deviceQueryClause';
-import { ParameterType, OperationType } from '../../../api/models/deviceQuery';
+import { ParameterType } from '../../../api/models/deviceQuery';
 
 describe('DeviceQueryClause', () => {
     const defaultProps: DeviceQueryClauseProps = {
@@ -51,7 +51,7 @@ describe('DeviceQueryClause', () => {
             'deviceLists.query.searchPills.clause.parameterType.ariaLabel'
         ).textContent).toContain('deviceLists.query.searchPills.clause.parameterType.items.status');
         expect(screen.getByLabelText(
-            'deviceLists.query.searchPills.clause.value.placeholder'
+            'deviceLists.query.searchPills.clause.value.ariaLabel'
         ).textContent).toContain('deviceLists.query.searchPills.clause.value.deviceStatus.enabled');
     });
 });

From 1a33f7724c2ca8f1398a5daa0eef25a65dbc2963 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Thu, 30 Jul 2026 13:33:35 -0700
Subject: [PATCH 6/9] pr feedback

---
 src/app/css/_header.scss                      |  8 ++--
 src/app/css/_notification.scss                |  8 +---
 src/app/css/_themes.scss                      | 14 ++-----
 .../components/cloudToDeviceMessage.spec.tsx  | 16 ++++----
 .../components/deviceContentNav.scss          |  6 +--
 .../components/deviceQueryClause.tsx          |  8 +++-
 .../sasTokenGenerationView.spec.tsx           | 29 ++++++--------
 .../home/components/homeViewNavigation.scss   |  6 +--
 .../components/notificationListEntry.tsx      |  8 +++-
 src/app/shared/components/application.tsx     |  1 -
 src/app/shared/components/copyButton.spec.tsx | 38 ++++++++++++++++++-
 src/app/shared/components/copyButton.tsx      | 15 ++++++--
 src/localization/locales/en.json              |  2 +-
 13 files changed, 95 insertions(+), 64 deletions(-)

diff --git a/src/app/css/_header.scss b/src/app/css/_header.scss
index 626b9fb7..fccbd0e9 100644
--- a/src/app/css/_header.scss
+++ b/src/app/css/_header.scss
@@ -59,9 +59,11 @@
         }
         .settings button {
             color: themed('headerButtonColor');
-        }
-        .settings button:focus-visible {
-            outline-color: themed('headerButtonColor');
+            // Fluent v9 paints its focus ring as an ::after border coloured by
+            // --colorStrokeFocus2 and forces outline-style: none, so the token has
+            // to be overridden. The default is black, which is invisible against
+            // the dark header background.
+            --colorStrokeFocus2: #{themed('headerButtonColor')};
         }
         .settings button svg {
             color: var(--colorBrandForeground1);
diff --git a/src/app/css/_notification.scss b/src/app/css/_notification.scss
index 3f3cad33..a6eb6d16 100644
--- a/src/app/css/_notification.scss
+++ b/src/app/css/_notification.scss
@@ -85,7 +85,7 @@
 .notification-toast-body {
     word-break: break-word;
     @include themify($themes) {
-        background-color: themed('notificationBackgroundColor') !important;
+        background-color: themed('notificationBackgroundColor');
     }
 }
 
@@ -94,12 +94,6 @@
     z-index: 10000000 !important;
 }
 
-.toast-notification {
-    @include themify($themes) {
-        background-color: themed('notificationBackgroundColor');
-    }
-}
-
 .notification-toast-progress-bar {
     @include themify($themes) {
         background: themed('notificationProgressBackground') !important;
diff --git a/src/app/css/_themes.scss b/src/app/css/_themes.scss
index 2eaaa44e..9836acdc 100644
--- a/src/app/css/_themes.scss
+++ b/src/app/css/_themes.scss
@@ -53,11 +53,7 @@
     disabledText: $dark-gray,
     inputComponentBackgroundColor: #ffffff,
     pivotOnHoverBackground: $textfield-disabled-background,
-    menuLinkBackground_Active: rgb(234, 234, 234),
-    menuLinkBackground_Hover: rgb(250, 250, 250),
-    menuLinkBorder_Active: rgb(0, 116, 204),
-    menuLinkColor_Hover: $link-blue,
-    menuLinkColor: rgb(51,51,51)
+    menuLinkBackground_Hover: rgb(250, 250, 250)
   ),
   dark: (
     headerTitleColor: #cccccc,
@@ -85,7 +81,7 @@
     notificationWarningColor: $warningText,
     notificationInfoColor: $infoText,
     notificationTextColor: #cccccc,
-    notificationBackgroundColor: var(--colorNeutralBackground1),
+    notificationBackgroundColor: var(--colorNeutralBackground1, #292929),
     notificationProgressBackground: $light-medium-gray,
     maskedCopyableColor: #cccccc,
     maskedCopyableReadonlyBackground: #363636,
@@ -105,11 +101,7 @@
     disabledText: $light-gray,
     inputComponentBackgroundColor: $dark-gray,
     pivotOnHoverBackground: #363636,
-    menuLinkBackground_Active: rgb(37, 37, 37),
-    menuLinkBackground_Hover: $dark-medium-gray,
-    menuLinkBorder_Active: rgb(75, 166, 216),
-    menuLinkColor_Hover: $link-blue,
-    menuLinkColor: rgb(248,248,248)
+    menuLinkBackground_Hover: $dark-medium-gray
   ),
   highContrastWhite: (
     headerTitleColor: $contrast-white-text,
diff --git a/src/app/devices/cloudToDeviceMessage/components/cloudToDeviceMessage.spec.tsx b/src/app/devices/cloudToDeviceMessage/components/cloudToDeviceMessage.spec.tsx
index 13c8387f..56498cd7 100644
--- a/src/app/devices/cloudToDeviceMessage/components/cloudToDeviceMessage.spec.tsx
+++ b/src/app/devices/cloudToDeviceMessage/components/cloudToDeviceMessage.spec.tsx
@@ -3,8 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { CloudToDeviceMessage } from './cloudToDeviceMessage';
 import * as AsyncSagaReducer from '../../../shared/hooks/useAsyncSagaReducer';
@@ -49,23 +48,22 @@ describe('CloudToDeviceMessage', () => {
         expect(screen.getByText('cloudToDeviceMessage.properties.addCustomProperty')).toBeInTheDocument();
     });
 
-    it('keeps a system property selection after the property list rerenders', async () => {
-        const user = userEvent.setup();
+    it('keeps a system property selection after the property list rerenders', () => {
         render(<MemoryRouter><CloudToDeviceMessage/></MemoryRouter>);
 
-        await user.click(screen.getByRole('button', {
+        fireEvent.click(screen.getByRole('button', {
             name: 'cloudToDeviceMessage.properties.addSystemProperty'
         }));
-        await user.click(screen.getByRole('menuitem', {
+        fireEvent.click(screen.getByRole('menuitem', {
             name: 'cloudToDeviceMessage.properties.systemProperties.ack.displayName'
         }));
 
         const ackDropdown = screen.getByRole('combobox');
-        await user.click(ackDropdown);
-        await user.click(screen.getByRole('option', {
+        fireEvent.click(ackDropdown);
+        fireEvent.click(screen.getByRole('option', {
             name: 'cloudToDeviceMessage.properties.systemProperties.ack.full'
         }));
-        await user.click(screen.getByRole('button', {
+        fireEvent.click(screen.getByRole('button', {
             name: 'cloudToDeviceMessage.properties.addCustomProperty'
         }));
 
diff --git a/src/app/devices/deviceIdentity/components/deviceContentNav.scss b/src/app/devices/deviceIdentity/components/deviceContentNav.scss
index b5711a66..93b6fa27 100644
--- a/src/app/devices/deviceIdentity/components/deviceContentNav.scss
+++ b/src/app/devices/deviceIdentity/components/deviceContentNav.scss
@@ -16,14 +16,12 @@
 
     a:link, a:visited, a:active {
         text-decoration: none;
-        @include themify($themes) {
-            color: themed('menuLinkColor');
-        }
     }
 
+    // Only the background is themed here. Fluent v9's Tab sets `color` directly on
+    // its `.fui-Tab__content` span, so a `color` on the `<a>` root never inherits.
     a:hover {
         @include themify($themes) {
-            color: themed('menuLinkColor_Hover');
             background-color: themed('menuLinkBackground_Hover');
         }
     }
diff --git a/src/app/devices/deviceList/components/deviceQueryClause.tsx b/src/app/devices/deviceList/components/deviceQueryClause.tsx
index 229a37a7..0dfbde80 100644
--- a/src/app/devices/deviceList/components/deviceQueryClause.tsx
+++ b/src/app/devices/deviceList/components/deviceQueryClause.tsx
@@ -138,6 +138,10 @@ export const DeviceQueryClause: React.FC<DeviceQueryClauseProps & DeviceQueryCla
     };
 
     const renderValueInput =  () => {
+        const valueAriaLabel = t(
+                ResourceKeys.deviceLists.query.searchPills.clause.value.ariaLabel,
+                { parameter: getParameterTypeText(parameterType) }
+            );
         switch (parameterType) {
             case ParameterType.edge:
                 return (
@@ -145,7 +149,7 @@ export const DeviceQueryClause: React.FC<DeviceQueryClauseProps & DeviceQueryCla
                         className="clause-value"
                         onOptionSelect={onValueDropdownChange}
                         placeholder={t(ResourceKeys.deviceLists.query.searchPills.clause.value.placeholder)}
-                        aria-label={t(ResourceKeys.deviceLists.query.searchPills.clause.value.ariaLabel)}
+                        aria-label={valueAriaLabel}
                         selectedOptions={value ? [value] : []}
                         value={value ? getValueText(value) : ''}
                     >
@@ -158,7 +162,7 @@ export const DeviceQueryClause: React.FC<DeviceQueryClauseProps & DeviceQueryCla
                         className="clause-value"
                         onOptionSelect={onValueDropdownChange}
                         placeholder={t(ResourceKeys.deviceLists.query.searchPills.clause.value.placeholder)}
-                        aria-label={t(ResourceKeys.deviceLists.query.searchPills.clause.value.ariaLabel)}
+                        aria-label={valueAriaLabel}
                         selectedOptions={value ? [value] : []}
                         value={value ? getValueText(value) : ''}
                     >
diff --git a/src/app/devices/shared/components/sasTokenGenerationView.spec.tsx b/src/app/devices/shared/components/sasTokenGenerationView.spec.tsx
index 2e43d973..012da07a 100644
--- a/src/app/devices/shared/components/sasTokenGenerationView.spec.tsx
+++ b/src/app/devices/shared/components/sasTokenGenerationView.spec.tsx
@@ -10,8 +10,7 @@ import { DeviceIdentity } from '../../../api/models/deviceIdentity';
 import * as deviceIdentityHelper from '../../deviceIdentity/components/deviceIdentityHelper';
 import { SAS_EXPIRES_MINUTES } from '../../../constants/devices';
 
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 const moduleIdentityTwinDataProps: SasTokenGenerationDataProps = {
     activeAzureResourceHostName: 'testHub.azure-devices.net'
 };
@@ -74,32 +73,30 @@ describe('devices/components/moduleIdentityTwin', () => {
         });
     });
 
-    it('keeps the selected key and a committed expiration value', async () => {
-        const user = userEvent.setup();
+    it('keeps the selected key and a committed expiration value', () => {
         const generateSpy = jest.spyOn(deviceIdentityHelper, 'generateSASTokenConnectionStringForModuleIdentity')
             .mockReturnValue('connection-string');
         render(getComponent({ moduleIdentity }));
 
-        await user.click(screen.getByTitle('collapsibleSection.open'));
+        fireEvent.click(screen.getByTitle('collapsibleSection.open'));
         const keyDropdown = screen.getByRole('combobox', {
             name: 'deviceIdentity.authenticationType.sasToken.symmetricKey'
         });
-        await user.click(keyDropdown);
-        await user.click(screen.getByRole('option', {
+        fireEvent.click(keyDropdown);
+        fireEvent.click(screen.getByRole('option', {
             name: 'deviceIdentity.authenticationType.symmetricKey.primaryKey'
         }));
 
         const expiration = screen.getByRole('spinbutton', {
             name: 'deviceIdentity.authenticationType.sasToken.expiration'
         });
-        await user.clear(expiration);
-        await user.type(expiration, '60');
-        await user.keyboard('{Enter}');
+        fireEvent.change(expiration, { target: { value: '60' } });
+        fireEvent.keyDown(expiration, { key: 'Enter' });
 
         expect(expiration).toHaveValue('60');
         expect(keyDropdown.textContent).toContain('deviceIdentity.authenticationType.symmetricKey.primaryKey');
 
-        await user.click(screen.getByRole('button', {
+        fireEvent.click(screen.getByRole('button', {
             name: 'deviceIdentity.authenticationType.sasToken.generateButton.text'
         }));
         expect(generateSpy).toHaveBeenCalledWith(
@@ -111,17 +108,15 @@ describe('devices/components/moduleIdentityTwin', () => {
         );
     });
 
-    it('rejects an expiration value below one minute', async () => {
-        const user = userEvent.setup();
+    it('rejects an expiration value below one minute', () => {
         render(getComponent({ moduleIdentity }));
 
-        await user.click(screen.getByTitle('collapsibleSection.open'));
+        fireEvent.click(screen.getByTitle('collapsibleSection.open'));
         const expiration = screen.getByRole('spinbutton', {
             name: 'deviceIdentity.authenticationType.sasToken.expiration'
         });
-        await user.clear(expiration);
-        await user.type(expiration, '0');
-        await user.keyboard('{Enter}');
+        fireEvent.change(expiration, { target: { value: '0' } });
+        fireEvent.keyDown(expiration, { key: 'Enter' });
 
         expect(expiration).toHaveValue(SAS_EXPIRES_MINUTES.toString());
     });
diff --git a/src/app/home/components/homeViewNavigation.scss b/src/app/home/components/homeViewNavigation.scss
index 73b45484..83b7a3ec 100644
--- a/src/app/home/components/homeViewNavigation.scss
+++ b/src/app/home/components/homeViewNavigation.scss
@@ -16,14 +16,12 @@
 
     a:link, a:visited, a:active {
         text-decoration: none;
-        @include themify($themes) {
-            color: themed('menuLinkColor');
-        }
     }
 
+    // Only the background is themed here. Fluent v9's Tab sets `color` directly on
+    // its `.fui-Tab__content` span, so a `color` on the `<a>` root never inherits.
     a:hover {
         @include themify($themes) {
-            color: themed('menuLinkColor_Hover');
             background-color: themed('menuLinkBackground_Hover');
         }
     }
diff --git a/src/app/notifications/components/notificationListEntry.tsx b/src/app/notifications/components/notificationListEntry.tsx
index 92dec90a..b7082ee5 100644
--- a/src/app/notifications/components/notificationListEntry.tsx
+++ b/src/app/notifications/components/notificationListEntry.tsx
@@ -29,6 +29,12 @@ export const NotificationListEntry: React.FC<NotificationListEntryProps> = (prop
     const message = t(notification.text.translationKey, notification.text.translationOptions);
     const friendlyMessage = <>{message.split('. ').map((m: React.ReactNode, index: number) => (<div className="message" key={index}>{m + '.'}<br/></div>))}</>;
     const longMessageLength = 300;
+    const ariaLabelMessageLength = 80;
+    // Keep the accessible name short: the full text is already in the list item, and a
+    // multi-sentence name is re-read on every pass through the notification list.
+    const shortMessage = message?.length > ariaLabelMessageLength ?
+        `${message.substring(0, ariaLabelMessageLength)}...` :
+        message;
 
     const navigateToNotificationCenter = () => {
         const path = `/${ROUTE_PARTS.HOME}/${ROUTE_PARTS.NOTIFICATIONS}?${ROUTE_PARAMS.NAV_FROM}`;
@@ -45,7 +51,7 @@ export const NotificationListEntry: React.FC<NotificationListEntryProps> = (prop
                 appearance="subtle"
                 icon={<CopyRegular />}
                 title={t(ResourceKeys.header.notifications.copy.label)}
-                aria-label={t(ResourceKeys.header.notifications.copy.ariaLabel, { notification: message })}
+                aria-label={t(ResourceKeys.header.notifications.copy.ariaLabel, { notification: shortMessage })}
                 onClick={copyToClipboard}
                 style={buttonProps.isFlex ? {flex: '1'} : {}}
             />
diff --git a/src/app/shared/components/application.tsx b/src/app/shared/components/application.tsx
index e464e3d0..ed7a95e9 100644
--- a/src/app/shared/components/application.tsx
+++ b/src/app/shared/components/application.tsx
@@ -44,7 +44,6 @@ export const Application: React.FC = () => {
                 </main>
                 <ToastContainer
                     autoClose={NOTIFICATION_AUTO_CLOSE}
-                    toastClassName="toast-notification"
                 />
             </div>
         </AriaLiveAnnouncer>
diff --git a/src/app/shared/components/copyButton.spec.tsx b/src/app/shared/components/copyButton.spec.tsx
index 086856ef..89df267a 100644
--- a/src/app/shared/components/copyButton.spec.tsx
+++ b/src/app/shared/components/copyButton.spec.tsx
@@ -16,14 +16,35 @@ describe('copyToClipboard', () => {
         expect(button).toBeInTheDocument();
     });
 
-    it('resets the popover text after it is dismissed', async () => {
+    it('keeps the copied text visible when the popover was already open on click', () => {
+        render(<CopyButton copyText='text'/>);
+
+        const button = screen.getByRole('button');
+        fireEvent.mouseEnter(button);
+        expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copy.label)).toBeInTheDocument();
+
+        fireEvent.click(button);
+        expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).toBeInTheDocument();
+    });
+
+    it('keeps the copied text visible on a repeat copy', () => {
         render(<CopyButton copyText='text'/>);
 
         const button = screen.getByRole('button');
         fireEvent.click(button);
+        fireEvent.click(button);
+
         expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).toBeInTheDocument();
+    });
+
+    it('resets the popover text after it is dismissed', async () => {
+        render(<CopyButton copyText='text'/>);
 
+        const button = screen.getByRole('button');
         fireEvent.click(button);
+        expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).toBeInTheDocument();
+
+        fireEvent.mouseLeave(button);
 
         await waitFor(() => {
             expect(screen.queryByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).not.toBeInTheDocument();
@@ -32,4 +53,19 @@ describe('copyToClipboard', () => {
         fireEvent.mouseEnter(button);
         expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copy.label)).toBeInTheDocument();
     });
+
+    it('resets the popover text when focus leaves the button', async () => {
+        render(<CopyButton copyText='text'/>);
+
+        const button = screen.getByRole('button');
+        fireEvent.focus(button);
+        fireEvent.click(button);
+        expect(screen.getByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).toBeInTheDocument();
+
+        fireEvent.blur(button);
+
+        await waitFor(() => {
+            expect(screen.queryByText(ResourceKeys.common.maskedCopyableTextField.copied.label)).not.toBeInTheDocument();
+        });
+    });
 });
\ No newline at end of file
diff --git a/src/app/shared/components/copyButton.tsx b/src/app/shared/components/copyButton.tsx
index 6576912d..174800c9 100644
--- a/src/app/shared/components/copyButton.tsx
+++ b/src/app/shared/components/copyButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Popover, PopoverSurface, PopoverTrigger, Text, useAnnounce } from '@fluentui/react-components';
+import { Button, Popover, PopoverProps, PopoverSurface, PopoverTrigger, Text, useAnnounce } from '@fluentui/react-components';
 import { CopyRegular } from '@fluentui/react-icons';
 import { ResourceKeys } from '../../../localization/resourceKeys';
 
@@ -16,16 +16,22 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
 
     const hiddenRef = React.useRef<HTMLInputElement | null>(null);
     const focusRef = React.useRef<HTMLButtonElement | null>(null);
+    // PopoverTrigger merges its own toggle into the button's onClick, so a click while
+    // the popover is already open (the usual case, since hover/focus opens it) would
+    // close it and hide the "Copied" confirmation. This flag suppresses that one close.
+    const copyingRef = React.useRef<boolean>(false);
 
     const dismissPopover = () => {
         setPopoverOpen(false);
         setCalloutTextKey(ResourceKeys.common.maskedCopyableTextField.copy.label);
     };
 
-    const handlePopoverOpenChange = (_event: unknown, data: { open: boolean }) => {
+    const handlePopoverOpenChange: PopoverProps['onOpenChange'] = (_event, data) => {
+        const suppressClose = copyingRef.current;
+        copyingRef.current = false;
         if (data.open) {
             setPopoverOpen(true);
-        } else {
+        } else if (!suppressClose) {
             dismissPopover();
         }
     };
@@ -38,6 +44,8 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
         if (focusRef.current) {
             focusRef.current.focus();
         }
+        copyingRef.current = true;
+        setPopoverOpen(true);
         setCalloutTextKey(ResourceKeys.common.maskedCopyableTextField.copied.label);
         announce(t(ResourceKeys.common.maskedCopyableTextField.copied.label));
     };
@@ -65,6 +73,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ copyText, disabled }) =>
                         icon={<CopyRegular />}
                         onClick={copyToClipboard}
                         onFocus={() => setPopoverOpen(true)}
+                        onBlur={dismissPopover}
                         onMouseEnter={() => setPopoverOpen(true)}
                         onMouseLeave={dismissPopover}
                         ref={focusRef}
diff --git a/src/localization/locales/en.json b/src/localization/locales/en.json
index 8ba74f81..562369c4 100644
--- a/src/localization/locales/en.json
+++ b/src/localization/locales/en.json
@@ -420,7 +420,7 @@
                     },
                     "value": {
                         "placeholder": "Select value",
-                        "ariaLabel": "Query clause value",
+                        "ariaLabel": "Value of {{parameter}} query clause",
                         "deviceCapability": {
                             "edge": "is Edge device",
                             "nonEdge": "is not Edge device"

From 192ff817e381a49ce7d4d6bd01d2d23487cbd775 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Thu, 30 Jul 2026 14:27:57 -0700
Subject: [PATCH 7/9] return focus on edit as well as add connection string

---
 .../components/connectionString.spec.tsx      |  5 ++-
 .../components/connectionString.tsx           |  7 ++--
 .../components/connectionStringsView.spec.tsx | 40 ++++++++++++++++++-
 .../components/connectionStringsView.tsx      | 23 ++++++-----
 4 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/src/app/connectionStrings/components/connectionString.spec.tsx b/src/app/connectionStrings/components/connectionString.spec.tsx
index 7140438e..24220f1e 100644
--- a/src/app/connectionStrings/components/connectionString.spec.tsx
+++ b/src/app/connectionStrings/components/connectionString.spec.tsx
@@ -41,8 +41,9 @@ describe('ConnectionString', () => {
         const onEdit = jest.fn();
         render(<MemoryRouter><ConnectionString {...defaultProps} onEditConnectionString={onEdit}/></MemoryRouter>);
 
-        fireEvent.click(screen.getByLabelText('connectionStrings.editConnectionCommand.ariaLabel'));
-        expect(onEdit).toHaveBeenCalledWith(testConnectionString);
+        const editButton = screen.getByLabelText('connectionStrings.editConnectionCommand.ariaLabel');
+        fireEvent.click(editButton);
+        expect(onEdit).toHaveBeenCalledWith(testConnectionString, editButton);
     });
 
     it('renders visit button that calls onSelectConnectionString', () => {
diff --git a/src/app/connectionStrings/components/connectionString.tsx b/src/app/connectionStrings/components/connectionString.tsx
index 9258ee9c..5bfc2cc3 100644
--- a/src/app/connectionStrings/components/connectionString.tsx
+++ b/src/app/connectionStrings/components/connectionString.tsx
@@ -19,7 +19,7 @@ import './connectionString.scss';
 
 export interface ConnectionStringProps {
     connectionStringWithExpiry: ConnectionStringWithExpiry;
-    onEditConnectionString(connectionString: string): void;
+    onEditConnectionString(connectionString: string, invoker?: HTMLElement): void;
     onDeleteConnectionString(connectionString: string): void;
     onSelectConnectionString(connectionString: string): void;
 }
@@ -34,8 +34,9 @@ export const ConnectionString: React.FC<ConnectionStringProps> = (props: Connect
     const [ confirmingDelete, setConfirmingDelete ] = React.useState<boolean>(false);
     const { t } = useTranslation();
 
-    const onEditConnectionStringClick = () => {
-        onEditConnectionString(connectionString);
+    const onEditConnectionStringClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        // Pass the button along so the edit drawer can return focus to it on close.
+        onEditConnectionString(connectionString, event.currentTarget);
     };
 
     const onDeleteConnectionStringClick = () => {
diff --git a/src/app/connectionStrings/components/connectionStringsView.spec.tsx b/src/app/connectionStrings/components/connectionStringsView.spec.tsx
index 5896bc8f..c04f36e4 100644
--- a/src/app/connectionStrings/components/connectionStringsView.spec.tsx
+++ b/src/app/connectionStrings/components/connectionStringsView.spec.tsx
@@ -3,7 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { ConnectionStringsView } from './connectionStringsView';
 import * as connectionStringContext from '../context/connectionStringStateContext';
@@ -73,4 +73,42 @@ describe('ConnectionStringsView', () => {
         // Should NOT show empty state
         expect(screen.queryByText('connectionStrings.empty.header')).toBeNull();
     });
+
+    it('returns focus to the add button when the add drawer is dismissed', () => {
+        render(<MemoryRouter><ConnectionStringsView/></MemoryRouter>);
+
+        const addButton = screen.getByLabelText('connectionStrings.addConnectionCommand.ariaLabel');
+        addButton.focus();
+        fireEvent.click(addButton);
+
+        expect(screen.getByText('connectionStrings.editConnection.title.add')).toBeInTheDocument();
+
+        fireEvent.click(screen.getAllByLabelText('connectionStrings.editConnection.cancel.ariaLabel.add')[0]);
+
+        expect(document.activeElement).toBe(addButton);
+    });
+
+    it('returns focus to the edit button when the edit drawer is dismissed', () => {
+        (connectionStringContext.useConnectionStringContext as jest.Mock).mockReturnValue([
+            {
+                payload: [
+                    { connectionString: 'HostName=hub1.azure-devices.net;SharedAccessKeyName=iothubowner;SharedAccessKey=key1', expiration: new Date(Date.now() + 365 * 86400000).toISOString() }
+                ],
+                synchronizationStatus: 'fetched'
+            },
+            { setConnectionStrings: jest.fn(), upsertConnectionString: jest.fn(), deleteConnectionString: jest.fn(), getConnectionStrings: mockGetConnectionStrings }
+        ]);
+
+        render(<MemoryRouter><ConnectionStringsView/></MemoryRouter>);
+
+        const editButton = screen.getByLabelText('connectionStrings.editConnectionCommand.ariaLabel');
+        editButton.focus();
+        fireEvent.click(editButton);
+
+        expect(screen.getByText('connectionStrings.editConnection.title.edit')).toBeInTheDocument();
+
+        fireEvent.click(screen.getAllByLabelText('connectionStrings.editConnection.cancel.ariaLabel.edit')[0]);
+
+        expect(document.activeElement).toBe(editButton);
+    });
 });
diff --git a/src/app/connectionStrings/components/connectionStringsView.tsx b/src/app/connectionStrings/components/connectionStringsView.tsx
index a000399d..5660dda0 100644
--- a/src/app/connectionStrings/components/connectionStringsView.tsx
+++ b/src/app/connectionStrings/components/connectionStringsView.tsx
@@ -30,6 +30,10 @@ export const ConnectionStringsView: React.FC = () => {
     const [ state, api ] = useConnectionStringContext();
     const [ connectionStringUnderEdit, setConnectionStringUnderEdit ] = React.useState<string>(undefined);
     const addButtonRef = React.useRef<HTMLButtonElement>(null);
+    // The element that opened the drawer, so focus can be returned to it on close.
+    // The drawer is shared by the add button and every row's edit button, so this is
+    // assigned per invocation rather than being tied to a single control.
+    const drawerInvokerRef = React.useRef<HTMLElement>(null);
 
     const connectionStringsWithExpiry = state.payload;
     const synchronizationStatus = state.synchronizationStatus;
@@ -57,28 +61,29 @@ export const ConnectionStringsView: React.FC = () => {
     };
 
     const onAddConnectionStringClick = () => {
+        drawerInvokerRef.current = addButtonRef.current;
         setConnectionStringUnderEdit('');
     };
 
-    const onEditConnectionStringClick = (connectionString: string) => {
+    const onEditConnectionStringClick = (connectionString: string, invoker?: HTMLElement) => {
+        drawerInvokerRef.current = invoker ?? null;
         setConnectionStringUnderEdit(connectionString);
     };
 
+    const restoreFocusToDrawerInvoker = () => {
+        drawerInvokerRef.current?.focus();
+        drawerInvokerRef.current = null;
+    };
+
     const onConnectionStringEditCommit = (connectionString: string) => {
-        const wasAdding = connectionStringUnderEdit === '';
         onUpsertConnectionString(connectionString, connectionStringUnderEdit);
         setConnectionStringUnderEdit(undefined);
-        if (wasAdding) {
-            addButtonRef.current?.focus();
-        }
+        restoreFocusToDrawerInvoker();
     };
 
     const onConnectionStringEditDismiss = () => {
-        const wasAdding = connectionStringUnderEdit === '';
         setConnectionStringUnderEdit(undefined);
-        if (wasAdding) {
-            addButtonRef.current?.focus();
-        }
+        restoreFocusToDrawerInvoker();
     };
 
     React.useEffect(() => {

From 6a07acc1384b8243b801e9fdffdbf68d22ba27cc Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Thu, 30 Jul 2026 15:36:04 -0700
Subject: [PATCH 8/9] fix unit tests

---
 package.json                                     |  2 +-
 src/app/iotHub/components/iotHubDevices.spec.tsx | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9f48ab92..0162a510 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "start:dev": "concurrently \"npm run start:web:dev\" \"npm run start:electron:dev\"",
     "start:web:dev": "npm run localization && npm run webpack:compile && webpack-dev-server --config webpack.dev.js --mode development --hot --port 3000 --host 127.0.0.1",
     "start:electron:dev": "wait-on http://localhost:3000 && npm run electron:compile && npm run preload:compile && cross-env NODE_ENV=development electron .",
-    "test": "npm run localization && jest --coverage",
+    "test": "npm run localization && node --max-old-space-size=4096 ./node_modules/jest/bin/jest.js --coverage",
     "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand -i --watch",
     "test:e2e": "npm run test:e2e:typecheck && npm run build && playwright test",
     "test:e2e:cleanup": "tsx e2e/scripts/cleanupDevices.ts",
diff --git a/src/app/iotHub/components/iotHubDevices.spec.tsx b/src/app/iotHub/components/iotHubDevices.spec.tsx
index 2beb0fab..d89b8e24 100644
--- a/src/app/iotHub/components/iotHubDevices.spec.tsx
+++ b/src/app/iotHub/components/iotHubDevices.spec.tsx
@@ -5,17 +5,18 @@
 import * as React from 'react';
 import { IotHubDevices } from './iotHubDevices';
 
-import { render, act } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+jest.mock('../../devices/deviceList/components/deviceList', () => ({
+    DeviceList: () => null
+}));
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     useLocation: () => ({ pathname: '', search: '', hash: '', state: null, key: 'default' })
 }));
 
 describe('IotHubDevices', () => {
-    it('matches snapshot', async () => {
-        await act(async () => {
-            expect(render(<MemoryRouter><IotHubDevices /></MemoryRouter>)).toBeDefined();
-        });
+    it('matches snapshot', () => {
+        expect(render(<MemoryRouter><IotHubDevices /></MemoryRouter>)).toBeDefined();
     });
 });
\ No newline at end of file

From 8810e53b12e4bbdbf18eedb906b0d07e38be4e75 Mon Sep 17 00:00:00 2001
From: Rachel Harris <raharri@microsoft.com>
Date: Thu, 30 Jul 2026 15:55:06 -0700
Subject: [PATCH 9/9] increase workflow timeout

---
 .github/workflows/nodejs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 12db09c6..7bf7319e 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -23,7 +23,7 @@ jobs:
           with:
               node-version: ${{ matrix.node-version }}
         - name: npm install, build, and test
-          timeout-minutes: 15
+          timeout-minutes: 25
           run: |
               npm ci --legacy-peer-deps
               npm run build --if-present