From 7b07fa53ef67d1a8d898021e462ce87730db98e9 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Tue, 29 Sep 2020 11:56:25 -0400
Subject: [PATCH] Use more specific rule skipping for a11y tests (#77647)

---
 package.json                                  |  2 +-
 .../query_string_input/query_string_input.tsx |  1 +
 .../__snapshots__/new_vis_modal.test.tsx.snap | 24 -------------------
 .../public/wizard/new_vis_modal.tsx           |  1 -
 .../wizard/type_selection/type_selection.tsx  |  1 -
 test/accessibility/services/a11y/a11y.ts      |  5 ++--
 .../services/a11y/analyze_with_axe.js         | 21 +++++++++++++++-
 .../public/components/search_bar.tsx          |  3 +++
 x-pack/test/accessibility/apps/home.ts        | 15 ++++++++----
 yarn.lock                                     |  8 +++----
 10 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 85af66d98a6ba..bc782a859bf3e 100644
--- a/package.json
+++ b/package.json
@@ -350,7 +350,7 @@
     "angular-route": "^1.8.0",
     "angular-sortable-view": "^0.0.17",
     "archiver": "^3.1.1",
-    "axe-core": "^3.4.1",
+    "axe-core": "^4.0.2",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^25.5.1",
     "babel-plugin-istanbul": "^6.0.0",
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index bbd998c0b74de..ec45b80927f6d 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -613,6 +613,7 @@ export class QueryStringInputUI extends Component<Props, State> {
             })}
             aria-haspopup="true"
             aria-expanded={this.state.isSuggestionsVisible}
+            data-skip-axe="aria-required-children"
           >
             <div
               role="search"
diff --git a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index 0925d1c7cc0c9..c2a2b27457f8d 100644
--- a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -147,7 +147,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
             <div
               aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
               class="euiModal euiModal--maxWidth-default visNewVisDialog"
-              role="menu"
               tabindex="0"
             >
               <button
@@ -251,7 +250,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                 class="euiKeyPadMenuItem visNewVisDialog__type"
                                 data-test-subj="visType-visWithAliasUrl"
                                 data-vis-stage="alias"
-                                role="menuitem"
                                 type="button"
                               >
                                 <div
@@ -283,7 +281,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                 class="euiKeyPadMenuItem visNewVisDialog__type"
                                 data-test-subj="visType-visWithSearch"
                                 data-vis-stage="production"
-                                role="menuitem"
                                 type="button"
                               >
                                 <div
@@ -316,7 +313,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                 data-test-subj="visType-vis"
                                 data-vis-stage="production"
                                 disabled=""
-                                role="menuitem"
                                 type="button"
                               >
                                 <div
@@ -377,7 +373,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
         aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
         className="visNewVisDialog"
         onClose={[Function]}
-        role="menu"
       >
         <EuiFocusTrap>
           <div
@@ -387,7 +382,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
               aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
               className="euiModal euiModal--maxWidth-default visNewVisDialog"
               onKeyDown={[Function]}
-              role="menu"
               tabIndex={0}
             >
               <EuiI18n
@@ -649,7 +643,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            role="menuitem"
                                           >
                                             <button
                                               aria-describedby="visTypeDescription-visWithAliasUrl"
@@ -662,7 +655,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                               onFocus={[Function]}
                                               onMouseEnter={[Function]}
                                               onMouseLeave={[Function]}
-                                              role="menuitem"
                                               type="button"
                                             >
                                               <div
@@ -720,7 +712,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            role="menuitem"
                                           >
                                             <button
                                               aria-describedby="visTypeDescription-visWithSearch"
@@ -733,7 +724,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                               onFocus={[Function]}
                                               onMouseEnter={[Function]}
                                               onMouseLeave={[Function]}
-                                              role="menuitem"
                                               type="button"
                                             >
                                               <div
@@ -791,7 +781,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            role="menuitem"
                                           >
                                             <button
                                               aria-describedby="visTypeDescription-vis"
@@ -804,7 +793,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                               onFocus={[Function]}
                                               onMouseEnter={[Function]}
                                               onMouseLeave={[Function]}
-                                              role="menuitem"
                                               type="button"
                                             >
                                               <div
@@ -1060,7 +1048,6 @@ exports[`NewVisModal should render as expected 1`] = `
             <div
               aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
               class="euiModal euiModal--maxWidth-default visNewVisDialog"
-              role="menu"
               tabindex="0"
             >
               <button
@@ -1148,7 +1135,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                 class="euiKeyPadMenuItem visNewVisDialog__type"
                                 data-test-subj="visType-vis"
                                 data-vis-stage="production"
-                                role="menuitem"
                                 type="button"
                               >
                                 <div
@@ -1180,7 +1166,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                 class="euiKeyPadMenuItem visNewVisDialog__type"
                                 data-test-subj="visType-visWithAliasUrl"
                                 data-vis-stage="alias"
-                                role="menuitem"
                                 type="button"
                               >
                                 <div
@@ -1212,7 +1197,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                 class="euiKeyPadMenuItem visNewVisDialog__type"
                                 data-test-subj="visType-visWithSearch"
                                 data-vis-stage="production"
-                                role="menuitem"
                                 type="button"
                               >
                                 <div
@@ -1273,7 +1257,6 @@ exports[`NewVisModal should render as expected 1`] = `
         aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
         className="visNewVisDialog"
         onClose={[Function]}
-        role="menu"
       >
         <EuiFocusTrap>
           <div
@@ -1283,7 +1266,6 @@ exports[`NewVisModal should render as expected 1`] = `
               aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
               className="euiModal euiModal--maxWidth-default visNewVisDialog"
               onKeyDown={[Function]}
-              role="menu"
               tabIndex={0}
             >
               <EuiI18n
@@ -1494,7 +1476,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            role="menuitem"
                                           >
                                             <button
                                               aria-describedby="visTypeDescription-vis"
@@ -1507,7 +1488,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                               onFocus={[Function]}
                                               onMouseEnter={[Function]}
                                               onMouseLeave={[Function]}
-                                              role="menuitem"
                                               type="button"
                                             >
                                               <div
@@ -1565,7 +1545,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            role="menuitem"
                                           >
                                             <button
                                               aria-describedby="visTypeDescription-visWithAliasUrl"
@@ -1578,7 +1557,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                               onFocus={[Function]}
                                               onMouseEnter={[Function]}
                                               onMouseLeave={[Function]}
-                                              role="menuitem"
                                               type="button"
                                             >
                                               <div
@@ -1636,7 +1614,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            role="menuitem"
                                           >
                                             <button
                                               aria-describedby="visTypeDescription-visWithSearch"
@@ -1649,7 +1626,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                               onFocus={[Function]}
                                               onMouseEnter={[Function]}
                                               onMouseLeave={[Function]}
-                                              role="menuitem"
                                               type="button"
                                             >
                                               <div
diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
index a9bf6bd171f15..4bedd3eb1c22a 100644
--- a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
+++ b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
@@ -108,7 +108,6 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
           onClose={this.onCloseModal}
           className="visNewVisDialog"
           aria-label={visNewVisDialogAriaLabel}
-          role="menu"
         >
           <TypeSelection
             showExperimental={this.isLabsEnabled}
diff --git a/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx b/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
index 0555b95648bc1..f507635093f7f 100644
--- a/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
+++ b/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
@@ -259,7 +259,6 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
         data-vis-stage={!('aliasPath' in visType) ? visType.stage : 'alias'}
         disabled={isDisabled}
         aria-describedby={`visTypeDescription-${visType.name}`}
-        role="menuitem"
         {...stage}
       >
         <VisTypeIcon
diff --git a/test/accessibility/services/a11y/a11y.ts b/test/accessibility/services/a11y/a11y.ts
index 35cef2b81d64e..871e50385eb8d 100644
--- a/test/accessibility/services/a11y/a11y.ts
+++ b/test/accessibility/services/a11y/a11y.ts
@@ -36,6 +36,8 @@ interface TestOptions {
 
 export const normalizeResult = (report: any) => {
   if (report.error) {
+    const error = new Error(report.error.message);
+    error.stack = report.error.stack;
     throw report.error;
   }
 
@@ -71,7 +73,6 @@ export function A11yProvider({ getService }: FtrProviderContext) {
           .concat(excludeTestSubj || [])
           .map((ts) => [testSubjectToCss(ts)])
           .concat([
-            ['.ace_scrollbar'],
             [
               '.leaflet-vega-container[role="graphics-document"][aria-roledescription="visualization"]',
             ],
@@ -97,7 +98,7 @@ export function A11yProvider({ getService }: FtrProviderContext) {
         runOnly: ['wcag2a', 'wcag2aa'],
         rules: {
           'color-contrast': {
-            enabled: false,
+            enabled: false, // disabled because we have too many failures
           },
           bypass: {
             enabled: false, // disabled because it's too flaky
diff --git a/test/accessibility/services/a11y/analyze_with_axe.js b/test/accessibility/services/a11y/analyze_with_axe.js
index 3cff67fa306dc..6d4aa1491278e 100644
--- a/test/accessibility/services/a11y/analyze_with_axe.js
+++ b/test/accessibility/services/a11y/analyze_with_axe.js
@@ -23,6 +23,18 @@ export function analyzeWithAxe(context, options, callback) {
   Promise.resolve()
     .then(() => {
       if (window.axe) {
+        window.axe.configure({
+          rules: [
+            {
+              id: 'scrollable-region-focusable',
+              selector: '[data-skip-axe="scrollable-region-focusable"]',
+            },
+            {
+              id: 'aria-required-children',
+              selector: '[data-skip-axe="aria-required-children"] > *',
+            },
+          ],
+        });
         return window.axe.run(context, options);
       }
 
@@ -31,7 +43,14 @@ export function analyzeWithAxe(context, options, callback) {
     })
     .then(
       (result) => callback({ result }),
-      (error) => callback({ error })
+      (error) => {
+        callback({
+          error: {
+            message: error.message,
+            stack: error.stack,
+          },
+        });
+      }
     );
 }
 
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
index dc1c111dea006..0dde28db0436d 100644
--- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
+++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
@@ -161,6 +161,9 @@ export function SearchBar({ globalSearch, navigateToUrl }: Props) {
           defaultMessage: 'Search Elastic',
         }),
       }}
+      popoverProps={{
+        repositionOnScroll: true,
+      }}
       emptyMessage={
         <EuiSelectableMessage style={{ minHeight: 300 }}>
           <p>
diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index a03050bd76a71..110201674b39a 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -11,6 +11,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const a11y = getService('a11y');
   const retry = getService('retry');
   const globalNav = getService('globalNav');
+  const testSubjects = getService('testSubjects');
 
   describe('Kibana Home', () => {
     before(async () => {
@@ -46,15 +47,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    // issue:  https://github.com/elastic/kibana/issues/38980
-    it.skip('navigating back to home page from console meets a11y requirements', async () => {
+    it('navigating back to home page from console meets a11y requirements', async () => {
       await PageObjects.home.clickOnLogo();
       await a11y.testAppSnapshot();
     });
 
-    // Extra clickon logo step here will be removed after preceding test is fixed.
     it('click on Add logs panel to open all log examples page meets a11y requirements ', async () => {
-      await PageObjects.home.clickOnLogo();
       await PageObjects.home.clickOnAddData();
       await a11y.testAppSnapshot();
     });
@@ -85,9 +83,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    it('unDock the side nav', async () => {
+    // TODO https://github.com/elastic/kibana/issues/77828
+    it.skip('undock the side nav', async () => {
       await PageObjects.home.dockTheSideNav();
       await a11y.testAppSnapshot();
     });
+
+    it('passes with searchbox open', async () => {
+      await PageObjects.common.navigateToApp('home');
+      await testSubjects.click('header-search');
+      await a11y.testAppSnapshot();
+    });
   });
 }
diff --git a/yarn.lock b/yarn.lock
index 1f849c97d4f13..59f1cd8103c0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6737,10 +6737,10 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-axe-core@^3.4.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.1.tgz#d8d5aaef73f003e8b766ea28bb078343f3622201"
-  integrity sha512-mwpDgPwWB+5kMHyLjlxh4w25ClJfqSxi+c6LQ4ix349TdCUctMwJNPTkhPD1qP9SYIjFgjeVpVZWCvK9oBGwCg==
+axe-core@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.0.2.tgz#c7cf7378378a51fcd272d3c09668002a4990b1cb"
+  integrity sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==
 
 axios@^0.18.0:
   version "0.18.1"