[8.x] [ObsUx][A11y] Add unique accessible lables to metadata table (#217496)

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

@@ -25386,7 +25386,6 @@
     "xpack.infra.logStreamPageTemplate.backtoLogsStream": "Retour au flux de logs",
     "xpack.infra.logStreamPageTemplate.widgetBadge": "Widget",
     "xpack.infra.logStreamPageTemplate.widgetDescription": "Vous visionnez un widget intégré. Les modifications seront synchronisées avec l'URL, mais elles ne seront pas conservées dans la vue par défaut du flux de logs.",
-    "xpack.infra.metadata.pinAriaLabel": "Champ épinglé",
     "xpack.infra.metadataEmbeddable.AddFilterAriaLabel": "Ajouter un filtre",
     "xpack.infra.metadataEmbeddable.errorAction": "récupérer de nouveau les métadonnées",
     "xpack.infra.metadataEmbeddable.errorMessage": "Une erreur s'est produite lors du chargement des données. Essayez de {refetch} et d'ouvrir à nouveau les détails de l'hôte.",
@@ -51793,4 +51792,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "Ce champ est requis.",
     "xpack.watcher.watcherDescription": "Détectez les modifications survenant dans vos données en créant, gérant et monitorant des alertes."
   }
-}
+}

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

@@ -25364,7 +25364,6 @@
     "xpack.infra.logStreamPageTemplate.backtoLogsStream": "ログストリームに戻る",
     "xpack.infra.logStreamPageTemplate.widgetBadge": "ウィジェット",
     "xpack.infra.logStreamPageTemplate.widgetDescription": "埋め込まれたウィジェットを表示しています。変更はURLと同期されますが、デフォルトログストリームビューには永続しません。",
-    "xpack.infra.metadata.pinAriaLabel": "固定されたフィールド",
     "xpack.infra.metadataEmbeddable.AddFilterAriaLabel": "フィルターを追加",
     "xpack.infra.metadataEmbeddable.errorAction": "メタデータを再取得",
     "xpack.infra.metadataEmbeddable.errorMessage": "データの読み込みエラーが発生しました。{refetch}し、ホスト詳細をもう一度開いてください。",
@@ -51754,4 +51753,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}

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

@@ -25417,7 +25417,6 @@
     "xpack.infra.logStreamPageTemplate.backtoLogsStream": "返回到日志流",
     "xpack.infra.logStreamPageTemplate.widgetBadge": "小组件",
     "xpack.infra.logStreamPageTemplate.widgetDescription": "您正在查看嵌入式小组件。更改将同步到 URL，但不会持续存在于默认日志流视图。",
-    "xpack.infra.metadata.pinAriaLabel": "已固定字段",
     "xpack.infra.metadataEmbeddable.AddFilterAriaLabel": "添加筛选",
     "xpack.infra.metadataEmbeddable.errorAction": "重新提取元数据",
     "xpack.infra.metadataEmbeddable.errorMessage": "加载数据时出错。尝试{refetch}并再次打开主机详情。",
@@ -51838,4 +51837,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}

x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx

@@ -14,10 +14,11 @@ import useToggle from 'react-use/lib/useToggle';
 import type { Field } from '../tabs/metadata/utils';
 
 interface ExpandableContentProps {
+  fieldName?: string;
   values?: Field['value'];
 }
 export const ExpandableContent = (props: ExpandableContentProps) => {
-  const { values } = props;
+  const { fieldName, values } = props;
   const [isExpanded, toggle] = useToggle(false);
   const showLessRef = useRef<HTMLAnchorElement | null>(null);
   const showMoreRef = useRef<HTMLAnchorElement | null>(null);
@@ -50,15 +51,17 @@ export const ExpandableContent = (props: ExpandableContentProps) => {
           <>
             <EuiLink
               data-test-subj="infraAssetDetailsExpandableContentCountMoreLink"
+              aria-label={i18n.translate('xpack.infra.assetDetails.metadata.seeMore.ariaLabel', {
+                defaultMessage: 'See {count} more {fieldName}',
+                values: { fieldName, count: others.length },
+              })}
               onClick={handleToggle}
               ref={showMoreRef}
             >
               <FormattedMessage
                 id="xpack.infra.assetDetails.tabs.metadata.seeMore"
                 defaultMessage="+{count} more"
-                values={{
-                  count: others.length,
-                }}
+                values={{ count: others.length }}
               />
             </EuiLink>
           </>

x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx

@@ -18,10 +18,6 @@ interface AddMetadataPinToRowProps {
   onPinned: Dispatch<React.SetStateAction<Array<Field['name']> | undefined>>;
 }
 
-const PIN_FIELD = i18n.translate('xpack.infra.metadataEmbeddable.pinField', {
-  defaultMessage: 'Pin Field',
-});
-
 export const AddMetadataPinToRow = ({
   fieldName,
   pinnedItems,
@@ -52,8 +48,9 @@ export const AddMetadataPinToRow = ({
             color="primary"
             iconType="pinFilled"
             data-test-subj="infraAssetDetailsMetadataRemovePin"
-            aria-label={i18n.translate('xpack.infra.metadata.pinAriaLabel', {
-              defaultMessage: 'Pinned field',
+            aria-label={i18n.translate('xpack.infra.metadata.pinnedAriaLabel', {
+              defaultMessage: 'Pinned {fieldName}',
+              values: { fieldName },
             })}
             onClick={handleRemovePin}
           />
@@ -78,13 +75,20 @@ export const AddMetadataPinToRow = ({
 
   return (
     <span className={showOnRowHoverCss}>
-      <EuiToolTip content={PIN_FIELD}>
+      <EuiToolTip
+        content={i18n.translate('xpack.infra.metadataEmbeddable.pinField', {
+          defaultMessage: 'Pin field',
+        })}
+      >
         <EuiButtonIcon
           color="primary"
           size="s"
           iconType="pin"
           data-test-subj="infraAssetDetailsMetadataAddPin"
-          aria-label={PIN_FIELD}
+          aria-label={i18n.translate('xpack.infra.metadataEmbeddable.pinField.ariaLabel', {
+            defaultMessage: 'Pin {fieldName}',
+            values: { fieldName },
+          })}
           onClick={handleAddPin}
         />
       </EuiToolTip>

x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/metadata/table.tsx

@@ -77,7 +77,14 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn
     () => [
       {
         field: 'value',
-        name: <EuiIcon type="pin" />,
+        name: (
+          <EuiIcon
+            type="pin"
+            aria-label={i18n.translate('xpack.infra.metadataEmbeddable.pinFieldsColumn.ariaLabel', {
+              defaultMessage: 'Pin fields',
+            })}
+          />
+        ),
         align: 'center' as HorizontalAlignment,
         width: '5%',
         sortable: false,
@@ -103,7 +110,9 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn
         name: VALUE_LABEL,
         width: '50%',
         sortable: false,
-        render: (_name: string, item: Field) => <ExpandableContent values={item.value} />,
+        render: (_name: string, item: Field) => (
+          <ExpandableContent fieldName={item.name} values={item.value} />
+        ),
       },
     ],
     [pinnedItems, setPinnedItems]