[Uptime] Unskip Uptime a11y tests (#208399)

## Summary Resolves #154003. Unskip a11y uptime tests.
2025-04-24 09:48:58 -04:00 · 2025-02-06 13:06:56 -05:00 · 2025-02-06 13:06:56 -05:00 · ac5012b656
commit ac5012b656
parent a990be66df
5 changed files with 89 additions and 83 deletions
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx
@ -125,9 +125,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
    });

    content = (
-      <ChartWrapper
-        height={height}
-        loading={loading}
+      <div
        aria-label={i18n.translate('xpack.uptime.snapshotHistogram.description', {
          defaultMessage:
            'Bar Chart showing uptime status over time from {startTime} to {endTime}.',
@ -137,58 +135,60 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
          },
        })}
      >
-        <Chart>
-          <Settings
-            xDomain={{
-              minInterval,
-              min: absoluteStartDate,
-              max: absoluteEndDate,
-            }}
-            showLegend={false}
-            onBrushEnd={onBrushEnd}
-            onElementClick={onBarClicked}
-            locale={i18n.getLocale()}
-            baseTheme={baseTheme}
-          />
-          <Axis
-            id={i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
-              defaultMessage: 'Ping X Axis',
-            })}
-            position={Position.Bottom}
-            showOverlappingTicks={false}
-            tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
-          />
-          <Axis
-            id={i18n.translate('xpack.uptime.snapshotHistogram.yAxisId', {
-              defaultMessage: 'Ping Y Axis',
-            })}
-            position="left"
-            tickFormat={(d) => numeral(d).format('0')}
-            labelFormat={(d) => numeral(d).format('0a')}
-            title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
-              defaultMessage: 'Pings',
-              description:
-                'The label on the y-axis of a chart that displays the number of times Heartbeat has pinged a set of services/websites.',
-            })}
-          />
+        <ChartWrapper height={height} loading={loading}>
+          <Chart>
+            <Settings
+              xDomain={{
+                minInterval,
+                min: absoluteStartDate,
+                max: absoluteEndDate,
+              }}
+              showLegend={false}
+              onBrushEnd={onBrushEnd}
+              onElementClick={onBarClicked}
+              locale={i18n.getLocale()}
+              baseTheme={baseTheme}
+            />
+            <Axis
+              id={i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
+                defaultMessage: 'Ping X Axis',
+              })}
+              position={Position.Bottom}
+              showOverlappingTicks={false}
+              tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
+            />
+            <Axis
+              id={i18n.translate('xpack.uptime.snapshotHistogram.yAxisId', {
+                defaultMessage: 'Ping Y Axis',
+              })}
+              position="left"
+              tickFormat={(d) => numeral(d).format('0')}
+              labelFormat={(d) => numeral(d).format('0a')}
+              title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
+                defaultMessage: 'Pings',
+                description:
+                  'The label on the y-axis of a chart that displays the number of times Heartbeat has pinged a set of services/websites.',
+              })}
+            />

-          <BarSeries
-            color={[danger, gray]}
-            data={barData}
-            id={STATUS_DOWN_LABEL}
-            name={i18n.translate('xpack.uptime.snapshotHistogram.series.pings', {
-              defaultMessage: 'Monitor Pings',
-            })}
-            stackAccessors={['x']}
-            splitSeriesAccessors={['type']}
-            timeZone={timeZone}
-            xAccessor="x"
-            xScaleType={ScaleType.Time}
-            yAccessors={['y']}
-            yScaleType={ScaleType.Linear}
-          />
-        </Chart>
-      </ChartWrapper>
+            <BarSeries
+              color={[danger, gray]}
+              data={barData}
+              id={STATUS_DOWN_LABEL}
+              name={i18n.translate('xpack.uptime.snapshotHistogram.series.pings', {
+                defaultMessage: 'Monitor Pings',
+              })}
+              stackAccessors={['x']}
+              splitSeriesAccessors={['type']}
+              timeZone={timeZone}
+              xAccessor="x"
+              xScaleType={ScaleType.Time}
+              yAccessors={['y']}
+              yScaleType={ScaleType.Linear}
+            />
+          </Chart>
+        </ChartWrapper>
+      </div>
    );
  }

--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/snapshots/monitor_status.bar.test.tsx.snap
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/snapshots/monitor_status.bar.test.tsx.snap
@ -81,39 +81,41 @@ Array [
    >
      Enable status alerts
    </dt>
-    <div
-      class="euiPopover emotion-euiPopover-inline-block"
-    >
+    <dd>
      <div
-        class="euiFormRow emotion-euiFormRow"
-        id="generated-id-row"
+        class="euiPopover emotion-euiPopover-inline-block"
      >
        <div
-          class="euiFormRow__fieldWrapper"
+          class="euiFormRow emotion-euiFormRow"
+          id="generated-id-row"
        >
          <div
-            class="euiSwitch emotion-euiSwitch"
+            class="euiFormRow__fieldWrapper"
          >
-            <button
-              aria-checked="false"
-              aria-label="Enable status alerts"
-              class="euiSwitch__button emotion-euiSwitch__button-compressed"
-              data-test-subj="uptimeDisplayDefineConnector"
-              id="generated-id"
-              role="switch"
-              type="button"
+            <div
+              class="euiSwitch emotion-euiSwitch"
            >
-              <span
-                class="euiSwitch__body emotion-euiSwitch__body-off"
-              />
-              <span
-                class="euiSwitch__thumb emotion-euiSwitch__thumb-off"
-              />
-            </button>
+              <button
+                aria-checked="false"
+                aria-label="Enable status alerts"
+                class="euiSwitch__button emotion-euiSwitch__button-compressed"
+                data-test-subj="uptimeDisplayDefineConnector"
+                id="generated-id"
+                role="switch"
+                type="button"
+              >
+                <span
+                  class="euiSwitch__body emotion-euiSwitch__body-off"
+                />
+                <span
+                  class="euiSwitch__thumb emotion-euiSwitch__thumb-off"
+                />
+              </button>
+            </div>
          </div>
        </div>
      </div>
-    </div>
+    </dd>
  </dl>,
 ]
 `;
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_bar/status_bar.tsx
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_bar/status_bar.tsx
@ -133,7 +133,9 @@ export const MonitorStatusBar: React.FC = () => {
        <MonitorRedirects monitorStatus={monitorStatus} />
        <EuiDescriptionListTitle>{ENABLE_STATUS_ALERT}</EuiDescriptionListTitle>
        {selectedMonitor && (
-          <EnableMonitorAlert monitorId={monitorId} selectedMonitor={selectedMonitor} />
+          <dd>
+            <EnableMonitorAlert monitorId={monitorId} selectedMonitor={selectedMonitor} />
+          </dd>
        )}
      </EuiDescriptionList>
    </>
--- a/x-pack/test/accessibility/apps/group1/uptime.ts
+++ b/x-pack/test/accessibility/apps/group1/uptime.ts
@ -19,8 +19,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
  const es = getService('es');
  const toasts = getService('toasts');

-  // github.com/elastic/kibana/issues/153601
-  describe.skip('uptime Accessibility', () => {
+  describe('uptime Accessibility', () => {
    before(async () => {
      await esArchiver.load('x-pack/test/functional/es_archives/uptime/blank');
      await makeChecks(es, A11Y_TEST_MONITOR_ID, 150, 1, 1000, {
@ -55,7 +54,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

    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 uptimeService.overview.openIntegrationsPopoverForMonitor(
+        A11Y_TEST_MONITOR_ID,
+        'uptime'
+      );
      await a11y.testAppSnapshot();
    });

--- a/x-pack/test/functional/services/uptime/overview.ts
+++ b/x-pack/test/functional/services/uptime/overview.ts
@ -15,8 +15,8 @@ export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
    async expandMonitorDetail(id: string): Promise<void> {
      return testSubjects.click(`xpack.synthetics.monitorList.${id}.expandMonitorDetail`);
    },
-    async openIntegrationsPopoverForMonitor(id: string): Promise<void> {
-      return testSubjects.click(`xpack.synthetics.monitorList.actionsPopover.${id}`);
+    async openIntegrationsPopoverForMonitor(id: string, plugin = 'synthetics'): Promise<void> {
+      return testSubjects.click(`xpack.${plugin}.monitorList.actionsPopover.${id}`);
    },
    async openAlertsPopover(): Promise<void> {
      return testSubjects.click('xpack.synthetics.alertsPopover.toggleButton');