3804 suite header and header action fix accessibility scan violations (…

…#3807) * fix(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suiteheader and headeraction): fix accessibility scan violations #3804 * chore(suitheader and headeraction): fix accessibility scan violations #3804 * Update PageTitleBar.test.e2e.jsx
carbon-design-system · Jun 27, 2023 · dcad3b6 · dcad3b6
1 parent f3cf4c2
commit dcad3b6
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 89 deletions.
diff --git a/packages/react/src/components/Header/Header.test.e2e.jsx b/packages/react/src/components/Header/Header.test.e2e.jsx
@@ -186,7 +186,7 @@ describe(
         cy.findByLabelText('Announcements').should('be.visible');
         cy.findByRole('button', { name: 'help' }).should('be.visible');
         cy.findByRole('button', { name: 'open and close list of options' }).should('not.exist');
-        cy.findByRole('menuitem', { name: 'user' }).should('be.visible');
+        cy.findByRole('button', { name: 'user', label: 'user' }).should('be.visible');
       });
 
       it('should hide header action actions in a small viewport', () => {
@@ -239,11 +239,11 @@ describe(
         cy.findByRole('button', { name: 'open and close list of options' }).click();
         cy.findByRole('menuitem', { name: 'user' }).click();
         cy.findByText('[email protected]').should('be.visible');
-        cy.findByRole('menuitem', { name: 'user' })
+        cy.findByTestId('menuitem', { name: 'user' })
           .find('svg')
           .invoke('attr', 'description')
           .should('eq', 'Close menu');
-        cy.findByRole('menuitem', { name: 'user' }).click();
+        cy.findByTestId('menuitem', { name: 'user' }).click();
         cy.findByRole('button', { name: 'open and close list of options' }).should('be.visible');
 
         // click the left side specifically to _not_ click the svg element right in the center
@@ -305,7 +305,9 @@ describe(
 
         cy.findByRole('button', { name: 'open and close list of options' }).click();
         cy.findByRole('menuitem', { name: 'Announcements' }).should('be.visible');
-        cy.findByRole('menuitem', { name: 'Custom icon 1' }).should('not.exist');
+        cy.findByRole('button', { name: 'Custom icon 1', label: 'Custom icon 1' }).should(
+          'not.exist'
+        );
       });
 
       it('should get width from documentElement when innerWidth fails', () => {

diff --git a/packages/react/src/components/Header/HeaderAction/HeaderActionMenu.jsx b/packages/react/src/components/Header/HeaderAction/HeaderActionMenu.jsx
@@ -160,7 +160,6 @@ class HeaderActionMenu extends React.Component {
           ref={focusRef}
           testId="menuitem"
           aria-label={ariaLabel}
-          role="menuitem"
           id={id}
         >
           <MenuContent ariaLabel={ariaLabel} />

diff --git a/...ges/react/src/components/Header/HeaderAction/__snapshots__/HeaderActionMenu.test.jsx.snap b/...ges/react/src/components/Header/HeaderAction/__snapshots__/HeaderActionMenu.test.jsx.snap
@@ -11,7 +11,6 @@ exports[`HeaderActionMenu should render 1`] = `
       aria-label="Accessibility label"
       class="bx--header__menu-item bx--header__menu-title iot--btn bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
       data-testid="menuitem"
-      role="menuitem"
       tabindex="0"
       type="button"
     >

diff --git a/packages/react/src/components/Header/__snapshots__/Header.story.storyshot b/packages/react/src/components/Header/__snapshots__/Header.story.storyshot
@@ -248,7 +248,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
-                role="menuitem"
                 tabIndex={0}
                 type="button"
               >
@@ -633,7 +632,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
-                role="menuitem"
                 tabIndex={0}
                 type="button"
               >
@@ -834,7 +832,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
-                role="menuitem"
                 tabIndex={0}
                 type="button"
               >
@@ -1057,7 +1054,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
-                role="menuitem"
                 tabIndex={0}
                 type="button"
               >
@@ -1643,7 +1639,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
-                role="menuitem"
                 tabIndex={0}
                 type="button"
               >

diff --git a/packages/react/src/components/Header/__snapshots__/Header.test.jsx.snap b/packages/react/src/components/Header/__snapshots__/Header.test.jsx.snap
@@ -165,7 +165,6 @@ exports[`Header should render 1`] = `
               class="bx--header__menu-item bx--header__menu-title iot--btn bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
               data-testid="menuitem"
               id="menu-item-global-action-1"
-              role="menuitem"
               tabindex="0"
               type="button"
             >

diff --git a/packages/react/src/components/Header/_header.scss b/packages/react/src/components/Header/_header.scss
@@ -46,7 +46,7 @@ $hoverBgColor: #2c2c2c;
     }
   }
 
-  &__menu-title[role='menuitem'][aria-expanded='true'] + &__menu {
+  &__menu-title[data-testid='menuitem'][aria-expanded='true'] + &__menu {
     left: auto;
     right: 0;
     [dir='rtl'] & {
@@ -166,7 +166,7 @@ $hoverBgColor: #2c2c2c;
   }
 
   .#{$prefix}--header__menu-item {
-    &[role='menuitem'] {
+    &[data-testid='menuitem'] {
       height: 100%;
       justify-content: center;
       padding: 0;
@@ -182,7 +182,7 @@ $hoverBgColor: #2c2c2c;
   }
 }
 
-.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem'] {
+.#{$prefix}--header__menu .#{$prefix}--header__menu-item[data-testid='menuitem'] {
   display: flex;
   align-items: center;
   color: $active-ui;

diff --git a/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.test.jsx b/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.test.jsx
@@ -709,13 +709,13 @@ describe('SuiteHeader', () => {
     const originalHref = window.location.href;
     const onRouteChange = jest.fn().mockImplementation(() => false);
     render(<SuiteHeader {...adminPageCommonProps} onRouteChange={onRouteChange} />);
-    userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+    userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
     await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
     expect(onRouteChange).toHaveBeenCalledWith('PROFILE', adminPageCommonProps.routes.profile);
     expect(window.location.href).toEqual(originalHref);
 
     onRouteChange.mockImplementation(() => true);
-    userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+    userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
     await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
     expect(onRouteChange).toHaveBeenCalledWith('PROFILE', adminPageCommonProps.routes.profile);
     expect(window.location.href).toBe(adminPageCommonProps.routes.profile);
@@ -936,7 +936,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLAnchorElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -975,7 +977,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLButtonElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1013,7 +1017,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLButtonElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1052,7 +1058,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLAnchorElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1094,7 +1102,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLAnchorElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1204,7 +1214,7 @@ describe('SuiteHeader', () => {
         'noopener noreferrer'
       );
       expect(window.open).toHaveBeenCalledTimes(1);
-      userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+      userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
       await userEvent.click(screen.getByTestId('suite-header-profile--profile'), {
         ctrlKey: true,
       });
@@ -1215,7 +1225,7 @@ describe('SuiteHeader', () => {
       );
       expect(window.open).toHaveBeenCalledTimes(2);
 
-      userEvent.click(screen.getByRole('menuitem', { name: 'Help' }));
+      userEvent.click(screen.getByRole('button', { name: 'Help', label: 'Help' }));
       await userEvent.click(screen.getByTitle('About'), { ctrlKey: true });
       expect(window.open).toHaveBeenLastCalledWith(
         workspaceBasedPageCommonProps.routes.about,

diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx
@@ -618,13 +618,13 @@ describe('SuiteHeader', () => {
     const originalHref = window.location.href;
     const onRouteChange = jest.fn().mockImplementation(() => false);
     render(<SuiteHeader {...commonProps} onRouteChange={onRouteChange} />);
-    userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+    userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
     await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
     expect(onRouteChange).toHaveBeenCalledWith('PROFILE', commonProps.routes.profile);
     expect(window.location.href).toEqual(originalHref);
 
     onRouteChange.mockImplementation(() => true);
-    userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+    userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
     await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
     expect(onRouteChange).toHaveBeenCalledWith('PROFILE', commonProps.routes.profile);
     expect(window.location.href).toBe(commonProps.routes.profile);
@@ -845,7 +845,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLAnchorElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -884,7 +886,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLButtonElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -922,7 +926,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLButtonElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -961,7 +967,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLAnchorElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1003,7 +1011,9 @@ describe('SuiteHeader', () => {
       />
     );
 
-    userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+    userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+      skipClick: true,
+    });
     expect(screen.getByText('this is my message to you')).toBeVisible();
     jest.spyOn(HTMLAnchorElement.prototype, 'click');
     fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1105,7 +1115,7 @@ describe('SuiteHeader', () => {
         'noopener noreferrer'
       );
       expect(window.open).toHaveBeenCalledTimes(1);
-      userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+      userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
       await userEvent.click(screen.getByTestId('suite-header-profile--profile'), {
         ctrlKey: true,
       });
@@ -1116,7 +1126,7 @@ describe('SuiteHeader', () => {
       );
       expect(window.open).toHaveBeenCalledTimes(2);
 
-      userEvent.click(screen.getByRole('menuitem', { name: 'Help' }));
+      userEvent.click(screen.getByRole('button', { name: 'Help', label: 'Help' }));
       await userEvent.click(screen.getByTitle('About'), { ctrlKey: true });
       expect(window.open).toHaveBeenLastCalledWith(
         commonProps.routes.about,
@@ -1225,7 +1235,7 @@ describe('SuiteHeader', () => {
     it('should close action panel if other action clicked (safari)', () => {
       render(<SuiteHeader {...commonProps} />);
       const headerPanel = screen.getByLabelText('Header Panel');
-      const profileActionButton = screen.getByRole('menuitem', { name: 'user' });
+      const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
 
       userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
       expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
@@ -1250,7 +1260,7 @@ describe('SuiteHeader', () => {
     it('should close action dropdown if panel opened (safari)', () => {
       render(<SuiteHeader {...commonProps} />);
       const headerPanel = screen.getByLabelText('Header Panel');
-      const profileActionButton = screen.getByRole('menuitem', { name: 'user' });
+      const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
 
       userEvent.click(profileActionButton);
       expect(headerPanel).not.toHaveClass(`${prefix}--header-panel--expanded`);
@@ -1275,7 +1285,7 @@ describe('SuiteHeader', () => {
     it('should close action menu if clicked outside (safari)', () => {
       render(<SuiteHeader {...commonProps} />);
       const headerPanel = screen.getByLabelText('Header Panel');
-      const profileActionButton = screen.getByRole('menuitem', { name: 'user' });
+      const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
 
       expect(headerPanel).not.toHaveClass(`${prefix}--header-panel--expanded`);
       expect(profileActionButton).toHaveAttribute('aria-expanded', 'false');
@@ -1290,8 +1300,10 @@ describe('SuiteHeader', () => {
 
     it('should close action menu if clicked on other action (safari)', () => {
       render(<SuiteHeader {...commonProps} />);
-      const profileActionButton = screen.getByRole('menuitem', { name: 'user' });
-      const helpActionButton = screen.getByRole('menuitem', { name: 'Help' });
+      const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
+      // screen.getByTestId('menuitem', { 'aria-label': 'user' });
+      const helpActionButton = screen.getByRole('button', { name: 'Help', label: 'Help' });
+      // screen.getByTestId('menuitem', { 'aria-label': 'Help' });
 
       expect(helpActionButton).toHaveAttribute('aria-expanded', 'false');
       userEvent.click(helpActionButton);

diff --git a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.jsx b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.jsx
@@ -142,7 +142,7 @@ const SuiteHeaderAppSwitcher = ({
         );
       })}
       {mergedApplications?.length === 0 ? (
-        <div className={`${baseClassName}--no-app`}>
+        <div className={`${baseClassName}--no-app`} role="listitem">
           <div className="bee-icon-container">
             <Bee32 />
             <div className="bee-shadow" />

diff --git a/...s/SuiteHeader/SuiteHeaderAppSwitcher/__snapshots__/SuiteHeaderAppSwitcher.story.storyshot b/...s/SuiteHeader/SuiteHeaderAppSwitcher/__snapshots__/SuiteHeaderAppSwitcher.story.storyshot
@@ -122,6 +122,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
       />
       <div
         className="iot--suite-header-app-switcher--no-app"
+        role="listitem"
       >
         <div
           className="bee-icon-container"