From d4a0d04a56fccee6351a8a62e475f765f9bf5d1e Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Wed, 23 Aug 2023 12:59:47 -0600 Subject: [PATCH] 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 * 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 * feat: added skeleton test * fix: tests * fix: tests aria * chore: update snapshots * chore(snapshot): update snapshots * fix: snapshots --------- Co-authored-by: Guilherme Datilio Ribeiro Co-authored-by: Alison Joseph Co-authored-by: TJ Egan --- e2e/components/Toggle/Toggle-test.avt.e2e.js | 73 +++++++++++++++++++ e2e/components/Toggle/Toggle-test.e2e.js | 17 +---- .../__snapshots__/PublicAPI-test.js.snap | 3 - .../src/components/Toggle/Toggle-test.js | 6 +- .../src/components/Toggle/Toggle.Skeleton.tsx | 3 +- .../src/components/Toggle/Toggle.stories.js | 6 +- .../react/src/components/Toggle/Toggle.tsx | 2 +- .../ToggleSmall/ToggleSmall.Skeleton.js | 4 - 8 files changed, 83 insertions(+), 31 deletions(-) create mode 100644 e2e/components/Toggle/Toggle-test.avt.e2e.js diff --git a/e2e/components/Toggle/Toggle-test.avt.e2e.js b/e2e/components/Toggle/Toggle-test.avt.e2e.js new file mode 100644 index 000000000000..ceca317d4413 --- /dev/null +++ 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 index a80d7edf260a..d411f2858cbf 100644 --- 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 index 004791f7266c..92b9bb777f4d 100644 --- 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 index 4921a65613a2..e9dcbe4c555e 100644 --- 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( ); @@ -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 index 28e253da6ea7..65cc1c2cf6a9 100644 --- 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 = ({ - 'aria-label': ariaLabel = 'Toggle is loading', className, ...rest }) => { @@ -28,7 +27,7 @@ const ToggleSkeleton: React.FC = ({ ); return ( -
+
diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js index 845467f31c2a..dfff27323d9d 100644 --- 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 = () => ( @@ -93,7 +93,7 @@ export const WithAcessibleLabels = () => (
External toggle label
- +
@@ -109,6 +109,6 @@ export const WithAcessibleLabels = () => ( export const Skeleton = () => (
- +
); diff --git a/packages/react/src/components/Toggle/Toggle.tsx b/packages/react/src/components/Toggle/Toggle.tsx index 2b21faa03abf..a441986a5beb 100644 --- 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 index b5c7c15cdc85..23d711ee46ae 100644 --- 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 (