A11y tests for roles page (elastic#79900)

# Conflicts:
#	x-pack/test/accessibility/config.ts

test/accessibility/services/a11y/analyze_with_axe.js

@@ -33,6 +33,14 @@ export function analyzeWithAxe(context, options, callback) {
               id: 'aria-required-children',
               selector: '[data-skip-axe="aria-required-children"] > *',
             },
+            {
+              id: 'label',
+              selector: '[data-test-subj="comboBoxSearchInput"] *',
+            },
+            {
+              id: 'aria-roles',
+              selector: '[data-test-subj="comboBoxSearchInput"] *',
+            },
           ],
         });
         return window.axe.run(context, options);

x-pack/plugins/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.tsx

@@ -70,7 +70,7 @@ export class CollapsiblePanel extends Component<Props, State> {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiLink onClick={this.toggleCollapsed}>
+          <EuiLink data-test-subj="showHidePrivilege" onClick={this.toggleCollapsed}>
             {this.state.collapsed ? (
               <FormattedMessage
                 id="xpack.security.management.editRole.collapsiblePanel.showLinkText"

x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx

@@ -154,6 +154,7 @@ export class RolesGridPage extends Component<Props, State> {
                 toolsRight: this.renderToolsRight(),
                 box: {
                   incremental: true,
+                  'data-test-subj': 'searchRoles',
                 },
                 onChange: (query: Record<string, any>) => {
                   this.setState({

x-pack/test/accessibility/apps/roles.ts

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// a11y tests for spaces, space selection and spacce creation and feature controls
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['security', 'settings']);
+  const a11y = getService('a11y');
+  const esArchiver = getService('esArchiver');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const kibanaServer = getService('kibanaServer');
+
+  describe('Kibana roles page a11y tests', () => {
+    before(async () => {
+      await esArchiver.loadIfNeeded('logstash_functional');
+      await kibanaServer.uiSettings.update({
+        defaultIndex: 'logstash-*',
+      });
+      await PageObjects.security.clickElasticsearchRoles();
+    });
+
+    after(async () => {
+      await esArchiver.unload('logstash_functional');
+    });
+
+    it('a11y test for Roles main page', async () => {
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for searching a user', async () => {
+      await testSubjects.setValue('searchRoles', 'apm_user');
+      await a11y.testAppSnapshot();
+      await testSubjects.setValue('searchRoles', '');
+    });
+
+    it('a11y test for toggle button for show reserved users only', async () => {
+      await retry.waitFor(
+        'show reserved roles toggle button is visible',
+        async () => await testSubjects.exists('showReservedRolesSwitch')
+      );
+      await testSubjects.click('showReservedRolesSwitch');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('showReservedRolesSwitch');
+    });
+
+    it('a11y test for creating a role form', async () => {
+      await testSubjects.click('createRoleButton');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for show/hide privilege toggle button', async () => {
+      await testSubjects.click('showHidePrivilege');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('showHidePrivilege');
+    });
+
+    it('a11y test for cluster privileges drop down', async () => {
+      await testSubjects.click('cluster-privileges-combobox');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for grant access to fields toggle switch', async () => {
+      await testSubjects.click('restrictFieldsQuery0');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for grant read privilege access box', async () => {
+      await testSubjects.click('restrictFieldsQuery0');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for Kibana privileges panel-space privilege panel', async () => {
+      await testSubjects.click('addSpacePrivilegeButton');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for customize feature privilege', async () => {
+      await testSubjects.click('featureCategory_kibana');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('cancelSpacePrivilegeButton');
+    });
+
+    it('a11y test for view privilege summary panel', async () => {
+      await PageObjects.security.clickElasticsearchRoles();
+      await testSubjects.click('edit-role-action-global_canvas_all');
+      await testSubjects.click('viewPrivilegeSummaryButton');
+
+      await a11y.testAppSnapshot();
+      await testSubjects.click('euiFlyoutCloseButton');
+      await testSubjects.click('roleFormCancelButton');
+    });
+
+    it('a11y test for select and delete a role in roles listing table', async () => {
+      await testSubjects.click('checkboxSelectRow-antimeridian_points_reader');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('deleteRoleButton');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('confirmModalCancelButton');
+    });
+  });
+}

x-pack/test/accessibility/apps/users.ts

@@ -46,23 +46,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.click('showReservedUsersSwitch');
     });
 
-    it('a11y test for toggle button for show reserved users only', async () => {
-      await retry.waitFor(
-        'show reserved users toggle button is visible',
-        async () => await testSubjects.exists('showReservedUsersSwitch')
-      );
-      await testSubjects.click('showReservedUsersSwitch');
-      await a11y.testAppSnapshot();
-      await testSubjects.click('showReservedUsersSwitch');
-    });
-
     it('a11y test for create user panel', async () => {
       await testSubjects.click('createUserButton');
       await a11y.testAppSnapshot();
     });
 
-    // https://github.com/elastic/eui/issues/2841
-    it.skip('a11y test for roles drop down', async () => {
+    it('a11y test for roles drop down', async () => {
       await testSubjects.setValue('userFormUserNameInput', 'a11y');
       await testSubjects.setValue('passwordInput', 'password');
       await testSubjects.setValue('passwordConfirmationInput', 'password');
@@ -96,8 +85,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    // https://github.com/elastic/eui/issues/2841
-    it.skip('a11y test for Change password screen', async () => {
+    it('a11y test for Change password screen', async () => {
       await PageObjects.settings.clickLinkText('deleteA11y');
       await testSubjects.click('changePassword');
       await a11y.testAppSnapshot();

x-pack/test/accessibility/config.ts

@@ -24,6 +24,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/advanced_settings'),
       require.resolve('./apps/dashboard_edit_panel'),
       require.resolve('./apps/users'),
+      require.resolve('./apps/roles'),
       require.resolve('./apps/kibana_overview'),
       require.resolve('./apps/ingest_node_pipelines'),
     ],