From 71a4b083eb6e08f88c8ed74b97232e92b2bf5010 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 16 Oct 2024 16:11:37 +0200
Subject: [PATCH] Improve aria labels using test provider name property

---
 code/addons/test/src/manager.tsx                           | 1 +
 code/core/src/manager/components/sidebar/TestingModule.tsx | 6 +++---
 code/core/src/types/modules/addons.ts                      | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx
index e8e90eebbfba..f012edb5e6b7 100644
--- a/code/addons/test/src/manager.tsx
+++ b/code/addons/test/src/manager.tsx
@@ -85,6 +85,7 @@ addons.register(ADDON_ID, (api) => {
     runnable: true,
     watchable: true,
 
+    name: 'Component tests',
     title: ({ crashed }) => (crashed ? "Component tests didn't complete" : 'Component tests'),
     description: ({ failed, running, watching, progress, crashed, details }) => {
       const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
index 0b1499b785e3..f57eea163455 100644
--- a/code/core/src/manager/components/sidebar/TestingModule.tsx
+++ b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -241,7 +241,7 @@ export const TestingModule = ({
                 <Actions>
                   {state.watchable && (
                     <Button
-                      aria-label="Toggle watch mode"
+                      aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode for ${state.name}`}
                       variant="ghost"
                       padding="small"
                       active={state.watching}
@@ -255,7 +255,7 @@ export const TestingModule = ({
                     <>
                       {state.running && state.cancellable ? (
                         <Button
-                          aria-label={`Cancel tests`}
+                          aria-label={`Stop ${state.name}`}
                           variant="ghost"
                           padding="small"
                           onClick={() => onCancelTests(state.id)}
@@ -265,7 +265,7 @@ export const TestingModule = ({
                         </Button>
                       ) : (
                         <Button
-                          aria-label={`Run ${state.title}`}
+                          aria-label={`Start ${state.name}`}
                           variant="ghost"
                           padding="small"
                           onClick={() => onRunTests(state.id)}
diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts
index 3c874a6185f1..8528917cf19a 100644
--- a/code/core/src/types/modules/addons.ts
+++ b/code/core/src/types/modules/addons.ts
@@ -471,6 +471,7 @@ export interface Addon_TestProviderType<
   type: Addon_TypesEnum.experimental_TEST_PROVIDER;
   /** The unique id of the test provider. */
   id: string;
+  name: string;
   title: (state: Addon_TestProviderState<Details>) => ReactNode;
   description: (state: Addon_TestProviderState<Details>) => ReactNode;
   mapStatusUpdate?: (state: Addon_TestProviderState<Details>) => API_StatusUpdate;