fix: [Obs Synthetics > Monitor test run][KEYBOARD]: Date (check) drop…

…down needs a semantic label for the current check Closes: elastic/observability-dev#3689
elastic · Jul 2, 2024 · 36be3a3 · 36be3a3
1 parent d183092
commit 36be3a3
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/...solution/synthetics/public/apps/synthetics/components/step_details_page/step_page_nav.tsx b/...solution/synthetics/public/apps/synthetics/components/step_details_page/step_page_nav.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ReactElement, useState } from 'react';
+import React, { useState } from 'react';
 import {
   EuiButtonEmpty,
   EuiDescriptionList,
@@ -43,8 +43,7 @@ export const StepPageNavigation = ({ testRunPage }: { testRunPage?: boolean }) =
   const formatter = useDateFormat();
   const { basePath } = useSyntheticsSettingsContext();
   const selectedLocation = useSelectedLocation();
-
-  let startedAt: string | ReactElement = formatter(data?.details?.timestamp);
+  const startedAt = formatter(data?.details?.timestamp);
 
   const { stepIndex, monitorId } = useParams<{ stepIndex: string; monitorId: string }>();
 
@@ -77,9 +76,7 @@ export const StepPageNavigation = ({ testRunPage }: { testRunPage?: boolean }) =
     }
   }
 
-  if (!startedAt) {
-    startedAt = <EuiSkeletonText lines={1} />;
-  }
+  const startedAtWrapped = startedAt || <EuiSkeletonText lines={1} />;
 
   return (
     <EuiPopover
@@ -94,7 +91,7 @@ export const StepPageNavigation = ({ testRunPage }: { testRunPage?: boolean }) =
           iconSide="right"
           flush="left"
         >
-          {startedAt}
+          {startedAtWrapped}
         </EuiButtonEmpty>
       }
     >
@@ -111,8 +108,12 @@ export const StepPageNavigation = ({ testRunPage }: { testRunPage?: boolean }) =
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText size="s" className="eui-textNoWrap">
-            {startedAt}
+          <EuiText
+            size="s"
+            className="eui-textNoWrap"
+            aria-label={CURRENT_CHECK_ARIA_LABEL(startedAt)}
+          >
+            {startedAtWrapped}
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -145,3 +146,11 @@ export const NEXT_CHECK_BUTTON_TEXT = i18n.translate(
     defaultMessage: 'Next check',
   }
 );
+
+export const CURRENT_CHECK_ARIA_LABEL = (timestamp: string) =>
+  i18n.translate('xpack.synthetics.synthetics.stepDetail.currentCheckAriaLabel', {
+    defaultMessage: 'Current check: {timestamp}',
+    values: {
+      timestamp,
+    },
+  });
diff --git a/...n/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/step_page_nav.tsx b/...n/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/step_page_nav.tsx
@@ -24,6 +24,14 @@ export const NEXT_CHECK_BUTTON_TEXT = i18n.translate(
   }
 );
 
+export const CURRENT_CHECK_ARIA_LABEL = (timestamp: string) =>
+  i18n.translate('xpack.uptime.synthetics.stepDetail.currentCheckAriaLabel', {
+    defaultMessage: 'Current check: {timestamp}',
+    values: {
+      timestamp,
+    },
+  });
+
 interface Props {
   previousCheckGroup?: string;
   dateFormat: string;
@@ -40,6 +48,8 @@ export const StepPageNavigation = ({
   checkTimestamp,
   nextCheckGroup,
 }: Props) => {
+  const formattedTimestamp = moment(checkTimestamp).format(dateFormat);
+
   return (
     <EuiFlexGroup alignItems="center" justifyContent="flexEnd" responsive={false}>
       <EuiFlexItem grow={false}>
@@ -54,7 +64,9 @@ export const StepPageNavigation = ({
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiText size="s">{moment(checkTimestamp).format(dateFormat)}</EuiText>
+        <EuiText size="s" aria-label={CURRENT_CHECK_ARIA_LABEL(formattedTimestamp)}>
+          {formattedTimestamp}
+        </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty

diff --git a/...observability_solution/uptime/public/legacy_uptime/pages/synthetics/checks_navigation.tsx b/...observability_solution/uptime/public/legacy_uptime/pages/synthetics/checks_navigation.tsx
@@ -16,6 +16,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useHistory } from 'react-router-dom';
 import moment from 'moment';
+import { i18n } from '@kbn/i18n';
 import { SyntheticsJourneyApiResponse } from '../../../../common/runtime_types/ping';
 import { getShortTimeStamp } from '../../components/overview/monitor_list/columns/monitor_status_column';
 
@@ -27,6 +28,7 @@ interface Props {
 export const ChecksNavigation = ({ timestamp, details }: Props) => {
   const history = useHistory();
   const isMobile = useIsWithinMaxBreakpoint('s');
+  const shortTimestamp = getShortTimeStamp(moment(timestamp));
 
   return (
     <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
@@ -47,8 +49,17 @@ export const ChecksNavigation = ({ timestamp, details }: Props) => {
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiText size={isMobile ? 'xs' : 'm'} className="eui-textNoWrap">
-          {getShortTimeStamp(moment(timestamp))}
+        <EuiText
+          size={isMobile ? 'xs' : 'm'}
+          className="eui-textNoWrap"
+          aria-label={i18n.translate('xpack.uptime.synthetics.stepList.currentCheckAriaLabel', {
+            defaultMessage: 'Current check: {shortTimestamp}',
+            values: {
+              shortTimestamp,
+            },
+          })}
+        >
+          {shortTimestamp}
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>