Use more specific rule skipping for a11y tests (#77647)

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",

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"

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}

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

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

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,
+          },
+        });
+      }
     );
 }
 

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>

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();
+    });
   });
 }

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"