fix: [Obs Synthetics > Monitor Detail][SCREEN READER] Icons and repeated controls need unique accessible labels: 0013 (#188058)

Closes: https://github.com/elastic/observability-dev/issues/3651

# Description 

Observability has a lot of icons that are used for controls and table
row actions. These icons often have the same aria-label repeated across
rows. While this meets the letter of SC 1.3.1: Info and Relationships,
the repeated generic labels do not usually answer question what users
are editing, or what users are deleting. We want to provide clear labels
for each row to make the implicit relationships sighted users depend on,
explicit for screen reader users.

# Steps to repeat
1. Open the Inventory view
2. Turn on a screen reader
3. Traverse through the tables in screenshots
4. Verify the buttons do not describe what test run or document you're
taking action on

# What was changed?: 
1. `title`, `arial-label` attributes were updated for `EuiButtonIcon`'s

# Screen:
 
<img width="1546" alt="image"
src="fedc7756-d077-4a6e-bd80-af49b69b541c">



<img width="1546" alt="image"
src="ec0364c8-8fe5-448d-9a4d-c5f2b19a171d">

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/view_document.tsx

@@ -20,6 +20,7 @@ export const ViewDocument = ({ ping }: { ping: Ping }) => {
 
   const dataView = useSyntheticsDataView();
   const formatter = useDateFormat();
+  const formattedTimestamp = formatter(ping.timestamp);
 
   const [, hit] = useEsDocSearch({ id: ping.docId, index: SYNTHETICS_INDEX_PATTERN, dataView });
 
@@ -28,7 +29,7 @@ export const ViewDocument = ({ ping }: { ping: Ping }) => {
       <EuiButtonIcon
         data-test-subj="syntheticsViewDocumentButton"
         iconType="inspect"
-        title={INSPECT_DOCUMENT}
+        title={INSPECT_DOCUMENT(formattedTimestamp)}
         onClick={(evt: MouseEvent<HTMLButtonElement>) => {
           evt.stopPropagation();
           setIsFlyoutVisible(true);
@@ -46,7 +47,7 @@ export const ViewDocument = ({ ping }: { ping: Ping }) => {
           <EuiFlyoutHeader>
             <EuiTitle size="m">
               <h4>
-                {INDEXED_AT} {formatter(ping.timestamp)}
+                {INDEXED_AT} {formattedTimestamp}
               </h4>
             </EuiTitle>
           </EuiFlyoutHeader>
@@ -67,9 +68,8 @@ const INDEXED_AT = i18n.translate('xpack.synthetics.monitorDetails.summary.index
   defaultMessage: 'Indexed at',
 });
 
-export const INSPECT_DOCUMENT = i18n.translate(
-  'xpack.synthetics.monitorDetails.action.inspectDocument',
-  {
-    defaultMessage: 'Inspect document',
-  }
-);
+export const INSPECT_DOCUMENT = (timestamp: string) =>
+  i18n.translate('xpack.synthetics.monitorDetails.action.inspectDocument', {
+    defaultMessage: 'Inspect document timestamped {timestamp}',
+    values: { timestamp },
+  });

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/links/step_details_link.tsx

@@ -52,8 +52,7 @@ export const StepDetailsLinkIcon = ({
     <EuiButtonIcon
       data-test-subj="syntheticsStepDetailsLinkIconButton"
       {...commonProps}
-      aria-label={VIEW_DETAILS}
-      title={VIEW_DETAILS}
+      title={VIEW_DETAILS(stepIndex)}
       size="s"
       href={stepDetailsLink}
       target={target}
@@ -62,6 +61,10 @@ export const StepDetailsLinkIcon = ({
   );
 };
 
-const VIEW_DETAILS = i18n.translate('xpack.synthetics.monitor.step.viewStepDetails', {
-  defaultMessage: 'View step details',
-});
+const VIEW_DETAILS = (stepIndex: number = 1) =>
+  i18n.translate('xpack.synthetics.monitor.step.viewStepDetails', {
+    defaultMessage: 'View step {stepIndex} details',
+    values: {
+      stepIndex,
+    },
+  });

x-pack/plugins/translations/translations/fr-FR.json

@@ -40291,7 +40291,6 @@
     "xpack.synthetics.monitor.step.screenshot.unAvailable": "Image indisponible",
     "xpack.synthetics.monitor.step.viewErrorDetails": "Afficher les détails de l'erreur",
     "xpack.synthetics.monitor.step.viewPerformanceBreakdown": "Afficher la répartition des performances",
-    "xpack.synthetics.monitor.step.viewStepDetails": "Afficher les détails de l'étape",
     "xpack.synthetics.monitor.stepName.label": "Nom de l'étape",
     "xpack.synthetics.monitorAddEdit.throttling.connectionProfile.custom": "(X Mbits/s, Y Mbits/s, Z ms)",
     "xpack.synthetics.monitorAddEdit.throttling.connectionProfile.custom.label": "Personnalisé",
@@ -40470,7 +40469,6 @@
     "xpack.synthetics.monitorConfig.wait.error": "La durée d'attente n'est pas valide.",
     "xpack.synthetics.monitorConfig.wait.helpText": "Durée d'attente avant l'émission d'une autre requête d'écho ICMP si aucune réponse n'est reçue.",
     "xpack.synthetics.monitorConfig.wait.label": "Attendre",
-    "xpack.synthetics.monitorDetails.action.inspectDocument": "Inspecter le document",
     "xpack.synthetics.monitorDetails.availability.label": "Disponibilité",
     "xpack.synthetics.monitorDetails.brushArea.message": "Brosser une zone pour une plus haute fidélité",
     "xpack.synthetics.monitorDetails.complete.label": "Terminé",

x-pack/plugins/translations/translations/ja-JP.json

@@ -40268,7 +40268,6 @@
     "xpack.synthetics.monitor.step.screenshot.unAvailable": "画像がありません",
     "xpack.synthetics.monitor.step.viewErrorDetails": "エラー詳細を表示",
     "xpack.synthetics.monitor.step.viewPerformanceBreakdown": "パフォーマンスの内訳を表示",
-    "xpack.synthetics.monitor.step.viewStepDetails": "ステップ詳細を表示",
     "xpack.synthetics.monitor.stepName.label": "ステップ名",
     "xpack.synthetics.monitorAddEdit.throttling.connectionProfile.custom": "（X Mbps、Y Mbps、Z ms）",
     "xpack.synthetics.monitorAddEdit.throttling.connectionProfile.custom.label": "カスタム",
@@ -40447,7 +40446,6 @@
     "xpack.synthetics.monitorConfig.wait.error": "待機期間が無効です。",
     "xpack.synthetics.monitorConfig.wait.helpText": "応答が受信されない場合に、他のICMPエコーリクエストを発行する前に待機する期間。",
     "xpack.synthetics.monitorConfig.wait.label": "待機",
-    "xpack.synthetics.monitorDetails.action.inspectDocument": "ドキュメントを検査",
     "xpack.synthetics.monitorDetails.availability.label": "可用性",
     "xpack.synthetics.monitorDetails.brushArea.message": "信頼度を高めるためにエリアを精査",
     "xpack.synthetics.monitorDetails.complete.label": "完了",

x-pack/plugins/translations/translations/zh-CN.json

@@ -40314,7 +40314,6 @@
     "xpack.synthetics.monitor.step.screenshot.unAvailable": "图像不可用",
     "xpack.synthetics.monitor.step.viewErrorDetails": "查看错误详情",
     "xpack.synthetics.monitor.step.viewPerformanceBreakdown": "查看性能细目",
-    "xpack.synthetics.monitor.step.viewStepDetails": "查看步骤详情",
     "xpack.synthetics.monitor.stepName.label": "步骤名称",
     "xpack.synthetics.monitorAddEdit.throttling.connectionProfile.custom": "（X Mbps，Y Mbps，Z ms）",
     "xpack.synthetics.monitorAddEdit.throttling.connectionProfile.custom.label": "定制",
@@ -40493,7 +40492,6 @@
     "xpack.synthetics.monitorConfig.wait.error": "等待持续时间无效。",
     "xpack.synthetics.monitorConfig.wait.helpText": "如果未收到响应，在发出另一个 ICMP 回显请求之前要等待的时长。",
     "xpack.synthetics.monitorConfig.wait.label": "等待",
-    "xpack.synthetics.monitorDetails.action.inspectDocument": "检查文档",
     "xpack.synthetics.monitorDetails.availability.label": "可用性",
     "xpack.synthetics.monitorDetails.brushArea.message": "轻刷某个区域以提高保真度",
     "xpack.synthetics.monitorDetails.complete.label": "已完成",