From c7721b33152bfbbc6d080245322968adf3aa60e9 Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 14 Jun 2024 16:38:47 -0400 Subject: [PATCH] chore(a11yaudit): remove unneeded nav/aria-label from Popover, update tests --- src/components/GenSwitcher/GenSwitcher.tsx | 6 +--- .../GetStartedPopover/GetStartedPopover.tsx | 6 ++-- .../__tests__/GetStartedPopover.test.tsx | 20 ++++++------ .../__tests__/PlatformNavigator.test.tsx | 31 +++++++++++++++---- src/components/PlatformNavigator/index.tsx | 6 ++-- src/components/Popover/PopoverList.tsx | 9 +----- .../Popover/__tests__/Popover.test.tsx | 22 +++++-------- 7 files changed, 52 insertions(+), 48 deletions(-) diff --git a/src/components/GenSwitcher/GenSwitcher.tsx b/src/components/GenSwitcher/GenSwitcher.tsx index 11dffdef7f1..7eafb98799f 100644 --- a/src/components/GenSwitcher/GenSwitcher.tsx +++ b/src/components/GenSwitcher/GenSwitcher.tsx @@ -24,11 +24,7 @@ export const GenSwitcher = ({ isGen1, testId }: GenSwitcherProps) => { {isGen1 ? 'Gen 1' : 'Gen 2'} Open Amplify generation navigation - + Gen 2 {isGen1 ? '' : } diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx index da0661ee45d..1c2603c08b1 100644 --- a/src/components/GetStartedPopover/GetStartedPopover.tsx +++ b/src/components/GetStartedPopover/GetStartedPopover.tsx @@ -16,11 +16,13 @@ export type GetStartedLinksType = { type GetStartedPopoverType = { platform: Platform | typeof DEFAULT_PLATFORM; getStartedLinks: GetStartedLinksType[]; + testId?: string; }; export const GetStartedPopover = ({ platform, - getStartedLinks + getStartedLinks, + testId }: GetStartedPopoverType) => { const isGen1Page = useIsGen1Page(); @@ -47,7 +49,7 @@ export const GetStartedPopover = ({ Toggle getting started guides navigation - + {getStartedLinks.map((link, index) => { return ( routerMock); describe('GetStartedPopover', () => { const getStartedHref = '/[platform]/start/quickstart/'; + const testId = 'getStartedTestId'; + const popoverTestId = `${testId}-popoverList`; const getStartedLinks = [ { title: 'React', @@ -112,7 +114,11 @@ describe('GetStartedPopover', () => { ]; const component = ( - + ); const componentWithGeneratedLinks = ( @@ -149,9 +155,7 @@ describe('GetStartedPopover', () => { const button = await screen.findByRole('button', { name: 'Toggle getting started guides navigation' }); - const dropdown = await screen.findByRole('navigation', { - name: 'Getting started guides for other platforms' - }); + const dropdown = screen.getByTestId(popoverTestId); expect(dropdown.classList).not.toContain('popover--expanded'); userEvent.click(button); @@ -180,9 +184,7 @@ describe('GetStartedPopover', () => { const button = await screen.findByRole('button', { name: 'Toggle getting started guides navigation' }); - const dropdown = await screen.findByRole('navigation', { - name: 'Getting started guides for other platforms' - }); + const dropdown = screen.getByTestId(popoverTestId); userEvent.click(button); expect(dropdown.classList).toContain('popover--expanded'); @@ -195,9 +197,7 @@ describe('GetStartedPopover', () => { const button = await screen.findByRole('button', { name: 'Toggle getting started guides navigation' }); - const dropdown = await screen.findByRole('navigation', { - name: 'Getting started guides for other platforms' - }); + const dropdown = screen.getByTestId(popoverTestId); const platformOptions = document.getElementsByClassName('popover-list__link'); diff --git a/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx b/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx index e3625a7993b..b809c20a206 100644 --- a/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx +++ b/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx @@ -26,8 +26,15 @@ const flatDirectoryMock = { jest.mock('@/directory/flatDirectory.json', () => flatDirectoryMock); describe('PlatformNavigator', () => { + const testId = 'platformNavTestId'; + const popoverTestId = `${testId}-popoverList`; + const component = ( - + ); it('should render the PlatformNavigator component', async () => { @@ -71,7 +78,7 @@ describe('PlatformNavigator', () => { render(component); const platformButton = await screen.getByRole('button'); - const popover = await screen.getByRole('navigation'); + const popover = screen.getByTestId(popoverTestId); const popoverFirstItem = popover.children[0].children[1]; userEvent.click(platformButton); userEvent.tab(); @@ -84,9 +91,15 @@ describe('PlatformNavigator', () => { }); it('should use current pathname when platform exists for that path', async () => { - render(); + render( + + ); - const popover = await screen.getByRole('navigation'); + const popover = screen.getByTestId(popoverTestId); const popoverFirstItem = popover.children[0].children[0]; expect(popoverFirstItem.children[0].getAttribute('href')).toBe( '/react/build-ui/figma-to-code' @@ -94,9 +107,15 @@ describe('PlatformNavigator', () => { }); it('should use platform root url when platform does not exist for current pathname', async () => { - render(); + render( + + ); - const popover = await screen.getByRole('navigation'); + const popover = screen.getByTestId(popoverTestId); // Flutter const popoverFirstItem = popover.children[0].children[6]; diff --git a/src/components/PlatformNavigator/index.tsx b/src/components/PlatformNavigator/index.tsx index 412effaabcb..59a0559c039 100644 --- a/src/components/PlatformNavigator/index.tsx +++ b/src/components/PlatformNavigator/index.tsx @@ -14,11 +14,13 @@ import { type PlatformNavigatorProps = { currentPlatform: Platform; isGen1: boolean; + testId?: string; }; export function PlatformNavigator({ currentPlatform, - isGen1 + isGen1, + testId }: PlatformNavigatorProps) { const { pathname } = useRouter(); @@ -57,7 +59,7 @@ export function PlatformNavigator({ {platformTitle} diff --git a/src/components/Popover/PopoverList.tsx b/src/components/Popover/PopoverList.tsx index 0a2111f7305..ca1f4bf9b8b 100644 --- a/src/components/Popover/PopoverList.tsx +++ b/src/components/Popover/PopoverList.tsx @@ -5,15 +5,9 @@ import { usePopover } from './usePopover'; interface PopoverListProps extends ViewProps { anchor?: 'left' | 'right'; fullWidth?: boolean; - /** - * @description - * Accessible label for the nav item. Required since we are using a