[Chore] : Migrated axe-puppeteer to @axe-core/puppeteer (#4482)

Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Migrated dependency `axe-puppeteer v1.1.1` to `@axe-core/puppeteer v4.1.1` ([#4482](https://github.com/elastic/eui/pull/4482))
 - Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480))
 
 **Bug fixes**

package.json

@@ -46,6 +46,7 @@
     "test-staged"
   ],
   "dependencies": {
+    "@axe-core/puppeteer": "^4.1.1",
     "@types/chroma-js": "^2.0.0",
     "@types/lodash": "^4.14.160",
     "@types/numeral": "^0.0.28",
@@ -115,7 +116,6 @@
     "argparse": "^2.0.1",
     "autoprefixer": "^9.8.6",
     "axe-core": "^4.1.1",
-    "axe-puppeteer": "^1.1.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.1.0",

scripts/a11y-testing.js

@@ -19,7 +19,7 @@
 
 const chalk = require('chalk');
 const puppeteer = require('puppeteer');
-const { AxePuppeteer } = require('axe-puppeteer');
+const { AxePuppeteer } = require('@axe-core/puppeteer');
 
 const docsPages = async (root, page) => {
   const pagesToSkip = [
@@ -106,6 +106,11 @@ const printResult = (result) =>
             id: 'scrollable-region-focusable',
             selector: '[data-skip-axe="scrollable-region-focusable"]',
           },
+          {
+            // can remove after https://github.com/dequelabs/axe-core/issues/2690 is resolved
+            id: 'region',
+            selector: 'iframe, #player,',
+          },
         ],
       })
       .analyze();

src/components/popover/__snapshots__/popover.test.tsx.snap

@@ -15,7 +15,6 @@ exports[`EuiPopover children is rendered 1`] = `
 
 exports[`EuiPopover is rendered 1`] = `
 <div
-  aria-label="aria-label"
   class="euiPopover euiPopover--anchorDownCenter testClass1 testClass2"
   data-test-subj="test subject string"
   id="0"

src/components/popover/popover.tsx

@@ -176,6 +176,15 @@ export interface EuiPopoverProps {
    * Use case is typically limited to an accompanying `EuiBeacon`
    */
   arrowChildren?: ReactNode;
+  /**
+   * Provide a name to the popover panel
+   */
+  'aria-label'?: string;
+  /**
+   * Alternative option to `aria-label` that takes an `id`.
+   * Usually takes the `id` of the popover title
+   */
+  'aria-labelledby'?: string;
 }
 
 type AnchorPosition = 'up' | 'right' | 'down' | 'left';
@@ -664,6 +673,8 @@ export class EuiPopover extends Component<Props, State> {
       display,
       onTrapDeactivation,
       buffer,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
       container,
       ...rest
     } = this.props;
@@ -750,6 +761,8 @@ export class EuiPopover extends Component<Props, State> {
               tabIndex={tabIndex}
               aria-live={ariaLive}
               role="dialog"
+              aria-label={ariaLabel}
+              aria-labelledby={ariaLabelledBy}
               aria-modal="true"
               aria-describedby={ariaDescribedby}
               style={this.state.popoverStyles}>

src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`EuiTableSortMobile is rendered 1`] = `
   class="euiTableSortMobile testClass1 testClass2"
 >
   <div
-    aria-label="aria-label"
     class="euiPopover euiPopover--anchorDownRight"
     data-test-subj="test subject string"
   >

src/components/tour/__snapshots__/tour_step.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`EuiTourStep can be closed 1`] = `
 <div
-  aria-label="aria-label"
   class="euiPopover euiPopover--anchorLeftUp"
   data-test-subj="test subject string"
   offset="10"
@@ -19,7 +18,6 @@ exports[`EuiTourStep can be closed 1`] = `
 
 exports[`EuiTourStep can override the footer action 1`] = `
 <div
-  aria-label="aria-label"
   class="euiPopover euiPopover--anchorLeftUp"
   data-test-subj="test subject string"
   offset="10"
@@ -36,7 +34,6 @@ exports[`EuiTourStep can override the footer action 1`] = `
 
 exports[`EuiTourStep can set a minWidth 1`] = `
 <div
-  aria-label="aria-label"
   class="euiPopover euiPopover--anchorLeftUp"
   data-test-subj="test subject string"
   offset="10"
@@ -53,7 +50,6 @@ exports[`EuiTourStep can set a minWidth 1`] = `
 
 exports[`EuiTourStep can turn off the beacon 1`] = `
 <div
-  aria-label="aria-label"
   class="euiPopover euiPopover--anchorLeftUp"
   data-test-subj="test subject string"
   offset="0"
@@ -70,7 +66,6 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
 
 exports[`EuiTourStep is rendered 1`] = `
 <div
-  aria-label="aria-label"
   class="euiPopover euiPopover--anchorLeftUp"
   data-test-subj="test subject string"
   offset="10"

src/components/tour/tour_step.tsx

@@ -40,6 +40,7 @@ import {
 import { EuiTitle } from '../title';
 
 import { EuiTourStepIndicator, EuiTourStepStatus } from './tour_step_indicator';
+import { htmlIdGenerator } from '../../services';
 
 type PopoverOverrides = 'button' | 'closePopover';
 
@@ -132,6 +133,8 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
   footerAction,
   ...rest
 }) => {
+  const generatedId = htmlIdGenerator();
+  const titleId = generatedId();
   if (step === 0) {
     console.warn(
       'EuiTourStep `step` should 1-based indexing. Please update to eliminate 0 indexes.'
@@ -216,9 +219,10 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
       panelClassName={classes}
       panelStyle={newStyle || style}
       offset={hasBeacon ? 10 : 0}
+      aria-labelledby={titleId}
       arrowChildren={hasBeacon && <EuiBeacon className="euiTour__beacon" />}
       {...rest}>
-      <EuiPopoverTitle className="euiTourHeader">
+      <EuiPopoverTitle className="euiTourHeader" id={titleId}>
         <EuiTitle size="xxxs" className="euiTourHeader__subtitle">
           <h1>{subtitle}</h1>
         </EuiTitle>

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@axe-core/puppeteer@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@axe-core/puppeteer/-/puppeteer-4.1.1.tgz#e9dd2f2f13b717c057ff68c5943dec8d4ddd8acf"
+  integrity sha512-Ao9N7HL//s26hdasx3Ba18tlJgxpoO+1SmIN6eSx5vC50dqYhiRU0xp6wBKWqzo10u1jpzl/s4RFsOAuolFMBA==
+  dependencies:
+    axe-core "^4.1.1"
+
 "@babel/cli@^7.10.5":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.10.5.tgz#57df2987c8cf89d0fc7d4b157ec59d7619f1b77a"
@@ -2762,7 +2769,7 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-axe-core@^3.5.3, axe-core@^3.5.4:
+axe-core@^3.5.4:
   version "3.5.5"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
   integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
@@ -2772,13 +2779,6 @@ axe-core@^4.1.1:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.1.tgz#70a7855888e287f7add66002211a423937063eaf"
   integrity sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==
 
-axe-puppeteer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.1.1.tgz#e95f46e069d84d388cdc9fc0630cf2b2e78b1100"
-  integrity sha512-bU7dt3zlXrlTmaBsudeACEkQ0O4a5LNxRCdA1Qfph4mqx/DewybPCrlyDqJlHXb/W7ZSodE1fMmC+MgRLizxuQ==
-  dependencies:
-    axe-core "^3.5.3"
-
 axios@^0.18.0, axios@^0.18.1:
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"