Merge pull request #29375 from storybookjs/test-provider-name

Core: Improve aria labels using test provider `name` property
storybookjs · Oct 17, 2024 · 2ecb957 · 2ecb957
2 parents e9523db + 71a4b08
commit 2ecb957
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;