Adding automated a11y tests for Canvas (#91571)

x-pack/plugins/canvas/i18n/components.ts

@@ -1752,6 +1752,12 @@ export const ComponentStrings = {
         description:
           'This column in the table contains the date/time the workpad was last updated.',
       }),
+    getTableActionsColumnTitle: () =>
+      i18n.translate('xpack.canvas.workpadLoader.table.actionsColumnTitle', {
+        defaultMessage: 'Actions',
+        description:
+          'This column in the table contains the actions that can be taken on a workpad.',
+      }),
   },
   WorkpadManager: {
     getModalTitle: () =>

x-pack/plugins/canvas/public/components/confirm_modal/confirm_modal.tsx

@@ -49,6 +49,7 @@ export const ConfirmModal: FunctionComponent<Props> = (props) => {
       cancelButtonText={cancelButtonText}
       defaultFocusedButton="confirm"
       buttonColor="danger"
+      data-test-subj="canvasConfirmModal"
     >
       {message}
     </EuiConfirmModal>

x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js

@@ -213,7 +213,7 @@ export class WorkpadLoader extends React.PureComponent {
         width: '20%',
         render: (date) => this.props.formatDate(date),
       },
-      { name: '', actions, width: '5%' },
+      { name: strings.getTableActionsColumnTitle(), actions, width: '100px' },
     ];
 
     const sorting = {
@@ -310,6 +310,7 @@ export class WorkpadLoader extends React.PureComponent {
         onClick={this.openRemoveConfirm}
         disabled={!canUserWrite}
         aria-label={strings.getDeleteButtonAriaLabel(selectedWorkpads.length)}
+        data-test-subj="deleteWorkpadButton"
       >
         {strings.getDeleteButtonLabel(selectedWorkpads.length)}
       </EuiButton>
@@ -331,6 +332,7 @@ export class WorkpadLoader extends React.PureComponent {
         display="default"
         compressed
         className="canvasWorkpad__upload--compressed"
+        aria-label={strings.getFilePickerPlaceholder()}
         initialPromptText={strings.getFilePickerPlaceholder()}
         onChange={([file]) => uploadWorkpad(file, this.onUpload, this.props.notify)}
         accept="application/json"

x-pack/plugins/canvas/public/components/workpad_manager/workpad_manager.js

@@ -37,6 +37,7 @@ export const WorkpadManager = ({ onClose }) => {
     {
       id: 'workpadTemplates',
       name: strings.getWorkpadTemplatesTabLabel(),
+      'data-test-subj': 'workpadTemplates',
       content: (
         <Fragment>
           <EuiSpacer />
@@ -50,7 +51,9 @@ export const WorkpadManager = ({ onClose }) => {
       <EuiModalHeader className="canvasHomeApp__modalHeader">
         <EuiFlexGroup alignItems="center" gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>
+              <h1>{strings.getModalTitle()}</h1>
+            </EuiModalHeaderTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiModalHeader>

x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot

@@ -95,6 +95,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
   />
   <div
     className="euiBasicTable canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
+    data-test-subj="canvasTemplatesTable"
   >
     <div>
       <div

x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx

@@ -150,6 +150,7 @@ export class WorkpadTemplates extends React.PureComponent<
           sorting={sorting}
           onChange={this.onTableChange}
           className="canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
+          data-test-subj="canvasTemplatesTable"
         />
         <EuiSpacer />
         {rows.length > 0 && (

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

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const a11y = getService('a11y');
+  const testSubjects = getService('testSubjects');
+  const esArchiver = getService('esArchiver');
+  const retry = getService('retry');
+  const { common } = getPageObjects(['common']);
+
+  describe('Canvas', () => {
+    before(async () => {
+      await esArchiver.load('canvas/default');
+      await common.navigateToApp('canvas');
+    });
+
+    it('loads workpads', async function () {
+      await retry.waitFor(
+        'canvas workpads visible',
+        async () => await testSubjects.exists('canvasWorkpadLoaderTable')
+      );
+      await a11y.testAppSnapshot();
+    });
+
+    it('provides bulk actions', async function () {
+      await testSubjects.click('checkboxSelectAll');
+      await retry.waitFor(
+        'canvas bulk actions visible',
+        async () => await testSubjects.exists('deleteWorkpadButton')
+      );
+      await a11y.testAppSnapshot();
+    });
+
+    it('can delete workpads', async function () {
+      await testSubjects.click('deleteWorkpadButton');
+      await retry.waitFor(
+        'canvas delete modal visible',
+        async () => await testSubjects.exists('canvasConfirmModal')
+      );
+      await a11y.testAppSnapshot();
+    });
+
+    it('can navigate to templates', async function () {
+      await testSubjects.click('confirmModalCancelButton'); // close modal from previous test
+
+      await testSubjects.click('workpadTemplates');
+      await retry.waitFor(
+        'canvas templates visible',
+        async () => await testSubjects.exists('canvasTemplatesTable')
+      );
+      await a11y.testAppSnapshot();
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -32,6 +32,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/ml'),
       require.resolve('./apps/lens'),
       require.resolve('./apps/upgrade_assistant'),
+      require.resolve('./apps/canvas'),
     ],
 
     pageObjects,