a11y tests on spaces home page including feature control (elastic#76515)

x-pack/plugins/spaces/public/management/components/confirm_delete_modal/confirm_delete_modal.tsx

@@ -139,6 +139,7 @@ class ConfirmDeleteModalUI extends Component<Props, State> {
                 })}
               >
                 <EuiFieldText
+                  data-test-subj="deleteSpaceInput"
                   name="confirmDeleteSpaceInput"
                   value={this.state.confirmSpaceName}
                   onChange={this.onSpaceNameChange}

x-pack/plugins/spaces/public/management/components/secure_space_message/secure_space_message.tsx

@@ -30,6 +30,7 @@ export const SecureSpaceMessage = (props: SecureSpaceMessageProps) => {
             values={{
               rolesLink: (
                 <EuiLink
+                  data-test-subj="rolesManagementPage"
                   href={props.getUrlForApp('management', { path: 'security/roles' })}
                   aria-label={rolesLinkTextAriaLabel}
                 >

x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx

@@ -86,6 +86,7 @@ export class CustomizeSpace extends Component<Props, State> {
               >
                 <EuiFieldText
                   name="name"
+                  data-test-subj="addSpaceName"
                   placeholder={i18n.translate(
                     'xpack.spaces.management.manageSpacePage.awesomeSpacePlaceholder',
                     {
@@ -149,6 +150,7 @@ export class CustomizeSpace extends Component<Props, State> {
           )}
 
           <EuiFormRow
+            data-test-subj="optionalDescription"
             label={i18n.translate(
               'xpack.spaces.management.manageSpacePage.spaceDescriptionFormRowLabel',
               {
@@ -165,6 +167,7 @@ export class CustomizeSpace extends Component<Props, State> {
             fullWidth
           >
             <EuiTextArea
+              data-test-subj="descriptionSpaceText"
               name="description"
               value={description}
               onChange={this.onDescriptionChange}

x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx

@@ -119,6 +119,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
         >
           <EuiFieldText
             inputRef={this.initialsInputRef}
+            data-test-subj="spaceLetterInitial"
             name="spaceInitials"
             // allows input to be cleared or otherwise invalidated while user is editing the initials,
             // without defaulting to the derived initials provided by `getSpaceInitials`
@@ -163,6 +164,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
         >
           <EuiFilePicker
             display="default"
+            data-test-subj="uploadCustomImageFile"
             initialPromptText={i18n.translate(
               'xpack.spaces.management.customizeSpaceAvatar.selectImageUrl',
               {

x-pack/plugins/spaces/public/management/edit_space/customize_space/space_identifier.tsx

@@ -46,6 +46,7 @@ class SpaceIdentifierUI extends Component<Props, State> {
         >
           <EuiFieldText
             readOnly={!this.state.editing}
+            data-test-subj="spaceURLDisplay"
             placeholder={
               this.state.editing || !this.props.editable
                 ? undefined
@@ -105,7 +106,11 @@ class SpaceIdentifierUI extends Component<Props, State> {
           id="xpack.spaces.management.spaceIdentifier.urlIdentifierLabel"
           defaultMessage="URL identifier "
         />
-        <EuiLink onClick={this.onEditClick} aria-label={editLinkLabel}>
+        <EuiLink
+          data-test-subj="CustomizeOrReset"
+          onClick={this.onEditClick}
+          aria-label={editLinkLabel}
+        >
           {editLinkText}
         </EuiLink>
       </p>

x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx

@@ -139,6 +139,7 @@ export class EnabledFeatures extends Component<Props, {}> {
                 values={{
                   rolesLink: (
                     <EuiLink
+                      data-test-subj="goToRoles"
                       href={this.props.getUrlForApp('management', { path: 'security/roles' })}
                     >
                       <FormattedMessage

x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx

@@ -101,6 +101,7 @@ export class FeatureTable extends Component<Props, {}> {
 
         return (
           <EuiSwitch
+            data-test-subj={`feature-${record.feature.id}-toggle`}
             id={record.feature.id}
             checked={checked}
             onChange={this.onChange(record.feature.id) as any}

x-pack/plugins/spaces/public/management/edit_space/enabled_features/toggle_all_features.tsx

@@ -71,8 +71,8 @@ export class ToggleAllFeatures extends Component<Props, State> {
 
     return (
       <EuiPopover
-        id={'changeAllFeatureVisibilityPopover'}
         button={button}
+        data-test-subj="changeAllFeatureVisibilityPopover"
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
         panelPaddingSize="none"

x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx

@@ -140,7 +140,11 @@ export class SpacesGridPage extends Component<Props, State> {
 
   public getPrimaryActionButton() {
     return (
-      <EuiButton fill {...reactRouterNavigate(this.props.history, '/create')}>
+      <EuiButton
+        fill
+        {...reactRouterNavigate(this.props.history, '/create')}
+        data-test-subj="createSpace"
+      >
         <FormattedMessage
           id="xpack.spaces.management.spacesGridPage.createSpaceButtonLabel"
           defaultMessage="Create a space"
@@ -334,6 +338,7 @@ export class SpacesGridPage extends Component<Props, State> {
           {
             render: (record: Space) => (
               <EuiButtonIcon
+                data-test-subj={`${record.name}-editSpace`}
                 aria-label={i18n.translate(
                   'xpack.spaces.management.spacesGridPage.editSpaceActionName',
                   {
@@ -351,6 +356,7 @@ export class SpacesGridPage extends Component<Props, State> {
             available: (record: Space) => !isReservedSpace(record),
             render: (record: Space) => (
               <EuiButtonIcon
+                data-test-subj={`${record.name}-deleteSpace`}
                 aria-label={i18n.translate(
                   'xpack.spaces.management.spacesGridPage.deleteActionName',
                   {

x-pack/plugins/spaces/public/nav_control/components/manage_spaces_button.tsx

@@ -32,6 +32,7 @@ export class ManageSpacesButton extends Component<Props, {}> {
         isDisabled={this.props.isDisabled}
         onClick={this.navigateToManageSpaces}
         style={this.props.style}
+        data-test-subj="manageSpaces"
       >
         <FormattedMessage
           id="xpack.spaces.manageSpacesButton.manageSpacesButtonLabel"

x-pack/plugins/spaces/public/nav_control/components/spaces_menu.tsx

@@ -184,6 +184,7 @@ class SpacesMenuUI extends Component<Props, State> {
     return (
       <EuiContextMenuItem
         key={space.id}
+        data-test-subj={`${space.id}-gotoSpace`}
         icon={icon}
         href={addSpaceIdToPath(this.props.serverBasePath, space.id, ENTER_SPACE_PATH)}
         toolTipTitle={space.description && space.name}

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

@@ -0,0 +1,142 @@
+/*
+ * 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(['common', 'spaceSelector', 'home', 'header', 'security']);
+  const a11y = getService('a11y');
+  const browser = getService('browser');
+  const esArchiver = getService('esArchiver');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const toasts = getService('toasts');
+
+  describe('Kibana spaces page meets a11y validations', () => {
+    before(async () => {
+      await esArchiver.load('empty_kibana');
+      await PageObjects.common.navigateToApp('home');
+    });
+
+    it('a11y test for manage spaces menu from top nav on Kibana home', async () => {
+      await PageObjects.spaceSelector.openSpacesNav();
+      await retry.waitFor(
+        'Manage spaces option visible',
+        async () => await testSubjects.exists('manageSpaces')
+      );
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for manage spaces page', async () => {
+      await PageObjects.spaceSelector.clickManageSpaces();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await toasts.dismissAllToasts();
+      await retry.waitFor(
+        'Manage spaces page visible',
+        async () => await testSubjects.exists('createSpace')
+      );
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for click on create space page', async () => {
+      await PageObjects.spaceSelector.clickCreateSpace();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for for customize space card', async () => {
+      await PageObjects.spaceSelector.clickEnterSpaceName();
+      await PageObjects.spaceSelector.addSpaceName('space_a');
+      await PageObjects.spaceSelector.clickSpaceAcustomAvatar();
+      await a11y.testAppSnapshot();
+      await browser.pressKeys(browser.keys.ESCAPE);
+    });
+
+    // EUI issue - https://github.com/elastic/eui/issues/3999
+    it.skip('a11y test for color picker', async () => {
+      await PageObjects.spaceSelector.clickColorPicker();
+      await a11y.testAppSnapshot();
+      await browser.pressKeys(browser.keys.ESCAPE);
+    });
+
+    it('a11y test for customize and reset space URL identifier', async () => {
+      await PageObjects.spaceSelector.clickOnCustomizeURL();
+      await a11y.testAppSnapshot();
+      await PageObjects.spaceSelector.clickOnCustomizeURL();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for describe space text space', async () => {
+      await PageObjects.spaceSelector.clickOnDescriptionOfSpace();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for click on "show" button to open customize feature display', async () => {
+      await retry.waitFor(
+        'show button is visible',
+        async () => await testSubjects.exists('show-hide-section-link')
+      );
+      await PageObjects.spaceSelector.clickShowFeatures();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for change all option for feature visibility popover', async () => {
+      await PageObjects.spaceSelector.clickFeaturesVisibilityButton();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for hide all feature visibility popover option', async () => {
+      await PageObjects.spaceSelector.clickHideAllFeatures();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for toggle individual feature - using enterprise feature visibility', async () => {
+      await PageObjects.spaceSelector.clickFeaturesVisibilityButton();
+      await PageObjects.spaceSelector.clickShowAllFeatures();
+      await PageObjects.spaceSelector.toggleFeatureVisibility('enterpriseSearch');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for space listing page', async () => {
+      await PageObjects.spaceSelector.clickSaveSpaceCreation();
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for updating a space', async () => {
+      await PageObjects.spaceSelector.clickSpaceEditButton('space_a');
+      await a11y.testAppSnapshot();
+      await PageObjects.spaceSelector.clickCancelSpaceCreation();
+    });
+
+    // creating space b and making it the current space so space selector page gets displayed when space b gets deleted
+    it('a11y test for delete space button', async () => {
+      await PageObjects.spaceSelector.clickCreateSpace();
+      await PageObjects.spaceSelector.clickEnterSpaceName();
+      await PageObjects.spaceSelector.addSpaceName('space_b');
+      await PageObjects.spaceSelector.clickSaveSpaceCreation();
+      await PageObjects.common.navigateToApp('home');
+      await PageObjects.spaceSelector.openSpacesNav();
+      await PageObjects.spaceSelector.clickSpaceAvatar('space_b');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.spaceSelector.openSpacesNav();
+      await PageObjects.spaceSelector.clickManageSpaces();
+      await PageObjects.spaceSelector.clickOnDeleteSpaceButton('space_b');
+      await a11y.testAppSnapshot();
+      // a11y test for no space name in confirm dialogue box
+      await PageObjects.spaceSelector.confirmDeletingSpace();
+      await a11y.testAppSnapshot();
+    });
+
+    // test starts with deleting space b so we can get the space selection page instead of logging out in the test
+    it('a11y test for space selection page', async () => {
+      await PageObjects.spaceSelector.setSpaceNameTobeDeleted('space_b');
+      await PageObjects.spaceSelector.confirmDeletingSpace();
+      await a11y.testAppSnapshot();
+      await PageObjects.spaceSelector.clickSpaceCard('default');
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -20,7 +20,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/grok_debugger'),
       require.resolve('./apps/search_profiler'),
       require.resolve('./apps/uptime'),
-      require.resolve('./apps/painless_lab'),
+      require.resolve('./apps/spaces'),
     ],
     pageObjects,
     services,