[Uptime] Add a11y tests (#65514)

* Add test attributes and missing aria labels to uptime UI code.

* Add uptime a11y tests and associated helper functions.

* Append a11y test instructions to uptime README.

* Update some copy on README page.

Refresh outdated snapshot.

* Add test for alert popover on overview page.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: justinkambic

x-pack/plugins/uptime/README.md

@@ -75,3 +75,19 @@ We can run these tests like described above, but with some special config.
 `node scripts/functional_tests_server.js --config=test/functional_with_es_ssl/config.ts`
 
 `node scripts/functional_test_runner.js --config=test/functional_with_es_ssl/config.ts`
+
+#### Running accessibility tests
+
+We maintain a suite of Accessibility tests (you may see them referred to elsewhere as `a11y` tests).
+
+These tests render each of our pages and ensure that the inputs and other elements contain the
+attributes necessary to ensure all users are able to make use of Kibana (for example, users relying
+on screen readers).
+
+The commands for running these tests are very similar to the other functional tests described above.
+
+From the `~/x-pack` directory:
+
+Start the server: `node scripts/functional_tests_server --config test/accessibility/config.ts`
+
+Run the uptime `a11y` tests: `node scripts/functional_test_runner.js --config test/accessibility/config.ts --grep=uptime`

x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap

@@ -171,6 +171,7 @@ export const MonitorListComponent: React.FC<Props> = ({
         return (
           <EuiButtonIcon
             aria-label={labels.getExpandDrawerLabel(id)}
+            data-test-subj={`xpack.uptime.monitorList.${id}.expandMonitorDetail`}
             iconType={drawerIds.includes(id) ? 'arrowUp' : 'arrowDown'}
             onClick={() => {
               if (drawerIds.includes(id)) {

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx

@@ -41,6 +41,7 @@ export const ActionsPopoverComponent = ({
               values: { monitorUrl },
             }
           )}
+          data-test-subj={`xpack.uptime.monitorList.actionsPopover.${summary.monitor_id}`}
           onClick={() => togglePopoverIsVisible({ id: popoverId, open: true })}
           iconType="arrowDown"
           iconSide="right"

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/actions_popover/actions_popover.tsx

@@ -20,6 +20,7 @@ import {
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../common/constants';
 import { DynamicSettings } from '../../../common/runtime_types';
 import { SettingsFormProps } from '../../pages/settings';
+import { certificateFormTranslations } from './translations';
 
 export type OnFieldChangeType = (changedValues: Partial<DynamicSettings>) => void;
 
@@ -80,6 +81,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={2}>
             <EuiFieldNumber
+              aria-label={certificateFormTranslations.expirationInputAriaLabel}
               data-test-subj={`expiration-threshold-input-${loading ? 'loading' : 'loaded'}`}
               fullWidth
               disabled={isDisabled}
@@ -126,6 +128,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={2}>
             <EuiFieldNumber
+              aria-label={certificateFormTranslations.ageInputAriaLabel}
               data-test-subj={`age-threshold-input-${loading ? 'loading' : 'loaded'}`}
               fullWidth
               disabled={isDisabled}

x-pack/plugins/uptime/public/components/settings/certificate_form.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const certificateFormTranslations = {
+  ageInputAriaLabel: i18n.translate(
+    'xpack.uptime.sourceConfiguration.ageLimitThresholdInput.ariaLabel',
+    {
+      defaultMessage:
+        'An input that controls the maximum number of days for which a TLS certificate may be valid before Kibana will show a warning.',
+    }
+  ),
+  expirationInputAriaLabel: i18n.translate(
+    'xpack.uptime.sourceConfiguration.certificateExpirationThresholdInput.ariaLabel',
+    {
+      defaultMessage:
+        'An input that controls the minimum number of days remaining for TLS certificate expiration before Kibana will show a warning.',
+    }
+  ),
+};

x-pack/plugins/uptime/public/components/settings/translations.ts

@@ -0,0 +1,86 @@
+/*
+ * 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.
+ */
+
+import moment from 'moment';
+import { FtrProviderContext } from '../ftr_provider_context';
+import { makeChecks } from '../../api_integration/apis/uptime/rest/helper/make_checks';
+
+const A11Y_TEST_MONITOR_ID = 'a11yTestMonitor';
+
+export default function({ getService, getPageObjects }: FtrProviderContext) {
+  const { uptime } = getPageObjects(['common', 'uptime']);
+  const a11y = getService('a11y');
+  const uptimeService = getService('uptime');
+  const esArchiver = getService('esArchiver');
+  const es = getService('es');
+
+  describe('uptime', () => {
+    before(async () => {
+      await esArchiver.load('uptime/blank');
+      await makeChecks(es, A11Y_TEST_MONITOR_ID, 150, 1, 1000, {
+        tls: {
+          certificate_not_valid_after: moment()
+            .add(30, 'days')
+            .toISOString(),
+          certificate_not_valid_before: moment()
+            .subtract(90, 'days')
+            .toISOString(),
+          server: {
+            x509: {
+              subject: {
+                common_name: 'a11y_common_name',
+              },
+              issuer: {
+                common_name: 'a11y_issuer_name',
+              },
+            },
+          },
+        },
+      });
+    });
+
+    beforeEach(async () => {
+      await uptime.goToRoot();
+    });
+
+    after(async () => {
+      await esArchiver.unload('uptime/blank');
+    });
+
+    it('overview page', async () => {
+      await a11y.testAppSnapshot();
+    });
+
+    it('overview page with expanded monitor detail', async () => {
+      await uptimeService.overview.expandMonitorDetail(A11Y_TEST_MONITOR_ID);
+      await uptimeService.overview.openIntegrationsPopoverForMonitor(A11Y_TEST_MONITOR_ID);
+      await a11y.testAppSnapshot();
+    });
+
+    it('overview alert popover controls', async () => {
+      await uptimeService.overview.openAlertsPopover();
+      await a11y.testAppSnapshot();
+      await uptimeService.overview.navigateToNestedPopover();
+      await a11y.testAppSnapshot();
+    });
+
+    it('detail page', async () => {
+      await uptimeService.navigation.goToMonitor(A11Y_TEST_MONITOR_ID);
+      await uptimeService.monitor.locationMapIsRendered();
+      await a11y.testAppSnapshot();
+    });
+
+    it('settings page', async () => {
+      await uptimeService.navigation.goToSettings();
+      await a11y.testAppSnapshot();
+    });
+
+    it('certificates page', async () => {
+      await uptimeService.navigation.goToCertificates();
+      await a11y.testAppSnapshot();
+    });
+  });
+}

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

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

x-pack/test/accessibility/config.ts

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+
+  return {
+    async expandMonitorDetail(id: string): Promise<void> {
+      return testSubjects.click(`xpack.uptime.monitorList.${id}.expandMonitorDetail`);
+    },
+    async openIntegrationsPopoverForMonitor(id: string): Promise<void> {
+      return testSubjects.click(`xpack.uptime.monitorList.actionsPopover.${id}`);
+    },
+    async openAlertsPopover(): Promise<void> {
+      return testSubjects.click('xpack.uptime.alertsPopover.toggleButton');
+    },
+    /**
+     * If the popover is already open, click the nested button.
+     * Otherwise, open the popover, then click the nested button.
+     */
+    async navigateToNestedPopover(): Promise<void> {
+      if (testSubjects.exists('xpack.uptime.openAlertContextPanel')) {
+        return testSubjects.click('xpack.uptime.openAlertContextPanel');
+      }
+      await testSubjects.click('xpack.uptime.alertsPopover.toggleButton');
+      return testSubjects.click('xpack.uptime.openAlertContextPanel');
+    },
+  };
+}

x-pack/test/functional/services/uptime/overview.ts

@@ -13,6 +13,7 @@ import { UptimeNavigationProvider } from './navigation';
 import { UptimeAlertsProvider } from './alerts';
 import { UptimeMLAnomalyProvider } from './ml_anomaly';
 import { UptimeCertProvider } from './certificates';
+import { UptimeOverviewProvider } from './overview';
 
 export function UptimeProvider(context: FtrProviderContext) {
   const common = UptimeCommonProvider(context);
@@ -22,6 +23,7 @@ export function UptimeProvider(context: FtrProviderContext) {
   const alerts = UptimeAlertsProvider(context);
   const ml = UptimeMLAnomalyProvider(context);
   const cert = UptimeCertProvider(context);
+  const overview = UptimeOverviewProvider(context);
 
   return {
     common,
@@ -31,5 +33,6 @@ export function UptimeProvider(context: FtrProviderContext) {
     alerts,
     ml,
     cert,
+    overview,
   };
 }