feat: toggle avt test (#14449)

* feat: toggle avt test * fix: test arial abelledby * fix: test arialabelledby - test * fix: test arialabelledby * feat: fix tests * fix: updating tests * fix: update tests * Update e2e/components/Toggle/Toggle-test.avt.e2e.js Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com> * feat: added skeleton test * fix: tests * fix: tests aria * chore: update snapshots * feat: toggle avt test * fix: test arial abelledby * fix: test arialabelledby - test * fix: test arialabelledby * feat: fix tests * fix: updating tests * fix: update tests * Update e2e/components/Toggle/Toggle-test.avt.e2e.js Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com> * feat: added skeleton test * fix: tests * fix: tests aria * chore: update snapshots * chore(snapshot): update snapshots * fix: snapshots --------- Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Aug 23, 2023 · d4a0d04 · d4a0d04
1 parent 41aa481
commit d4a0d04
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 31 deletions.
diff --git a/e2e/components/Toggle/Toggle-test.avt.e2e.js b/e2e/components/Toggle/Toggle-test.avt.e2e.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('Toggle @avt', () => {
+  test('accessibility-checker', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Toggle',
+      id: 'components-toggle--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Toggle');
+  });
+
+  test('accessibility-checker skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-toggle--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Toggle-skeleton');
+  });
+
+  test('accessibility-checker small toggle', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-toggle--small-toggle',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Toggle-small');
+  });
+
+  test('accessibility-checker with accessible labels', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-toggle--with-accessible-labels',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Toggle-accessible-labels');
+  });
+
+  test('default Toggle state - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-toggle--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('switch')).toBeVisible();
+    await page.keyboard.press('Space');
+    await page.getByText('Off');
+    await page.keyboard.press('Space');
+    await page.getByText('On');
+  });
+});
diff --git a/e2e/components/Toggle/Toggle-test.e2e.js b/e2e/components/Toggle/Toggle-test.e2e.js
@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test'); // eslint-disable-line
+const { test } = require('@playwright/test'); // eslint-disable-line
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook'); // eslint-disable-line
+const { snapshotStory } = require('../../test-utils/storybook'); // eslint-disable-line
 
 test.describe('Toggle', () => {
   themes.forEach((theme) => {
@@ -39,17 +39,4 @@ test.describe('Toggle', () => {
       });
     });
   });
-
-  // TODO: uncomment when https://github.com/IBMa/equal-access/issues/761 is resolved
-
-  // test('accessibility-checker @avt', async ({ page }) => {
-  //   await visitStory(page, {
-  //     component: 'Toggle',
-  //     id: 'components-toggle--default',
-  //     globals: {
-  //       theme: 'white',
-  //     },
-  //   });
-  //   await expect(page).toHaveNoACViolations('Toggle');
-  // });
 });
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9112,9 +9112,6 @@ Map {
     },
   },
   "ToggleSmallSkeleton" => Object {
-    "defaultProps": Object {
-      "aria-label": "Toggle is loading",
-    },
     "propTypes": Object {
       "aria-label": Object {
         "isRequired": true,

diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js
@@ -99,13 +99,13 @@ describe('Toggle', () => {
     });
 
     it("doesn't render sideLabel if props.hideLabel and no props.labelText is provided", () => {
-      const externalElementId = 'external-element-id';
       wrapper.rerender(
         <Toggle
+          role="switch"
           {...props}
           hideLabel
           labelText={null}
-          aria-labelledby={externalElementId}
+          aria-labelledby={props.id}
         />
       );
 
@@ -117,7 +117,7 @@ describe('Toggle', () => {
       // eslint-disable-next-line testing-library/prefer-screen-queries
       expect(wrapper.getByRole('switch')).toHaveAttribute(
         'aria-labelledby',
-        externalElementId
+        props.id
       );
 
       expect(

diff --git a/packages/react/src/components/Toggle/Toggle.Skeleton.tsx b/packages/react/src/components/Toggle/Toggle.Skeleton.tsx
@@ -16,7 +16,6 @@ interface ToggleSkeletonProps {
 }
 
 const ToggleSkeleton: React.FC<ToggleSkeletonProps> = ({
-  'aria-label': ariaLabel = 'Toggle is loading',
   className,
   ...rest
 }) => {
@@ -28,7 +27,7 @@ const ToggleSkeleton: React.FC<ToggleSkeletonProps> = ({
   );
 
   return (
-    <div className={skeletonClassNames} {...rest} aria-label={ariaLabel}>
+    <div className={skeletonClassNames} {...rest}>
       <div className={`${prefix}--toggle__skeleton-circle`} />
       <div className={`${prefix}--toggle__skeleton-rectangle`} />
     </div>

diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js
@@ -83,7 +83,7 @@ Playground.argTypes = {
   },
 };
 
-export const WithAcessibleLabels = () => (
+export const WithAccessibleLabels = () => (
   <VStack gap={7}>
     <Toggle id="toggle-4" labelText="Toggle label" />
 
@@ -93,7 +93,7 @@ export const WithAcessibleLabels = () => (
       <div id="toggle-6-label" style={{ marginBlockEnd: '0.5rem' }}>
         External toggle label
       </div>
-      <Toggle id="toggle-6" aria-labelledby="toggle-6-label" hideLabel />
+      <Toggle id="toggle-6" hideLabel />
     </div>
 
     <div>
@@ -109,6 +109,6 @@ export const WithAcessibleLabels = () => (
 
 export const Skeleton = () => (
   <div>
-    <ToggleSkeleton aria-label="Toggle is loading" />
+    <ToggleSkeleton />
   </div>
 );
diff --git a/packages/react/src/components/Toggle/Toggle.tsx b/packages/react/src/components/Toggle/Toggle.tsx
@@ -184,7 +184,7 @@ export function Toggle({
         role="switch"
         type="button"
         aria-checked={checked}
-        aria-labelledby={ariaLabelledby}
+        aria-labelledby={id}
         disabled={disabled}
         onClick={handleClick}
       />

diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js b/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
@@ -32,10 +32,6 @@ class ToggleSmallSkeleton extends React.Component {
     labelText: PropTypes.string,
   };
 
-  static defaultProps = {
-    ['aria-label']: 'Toggle is loading',
-  };
-
   render() {
     const { id, labelText, className, ...rest } = this.props;
     return (