[9.0] [ObsUx][A11y] Add unique accessible lables to metadata table (#217496) (#217621)

kibanamachine · MiriamAparicio · web-flow · commit be9363ab492b · 2025-04-23T16:56:23.000+02:00
# Backport This will backport the following commits from `main` to `9.0`: - [[ObsUx][A11y] Add unique accessible lables to metadata table (#217496)](#217496)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -23258,7 +23258,6 @@
     "xpack.infra.logSourceErrorPage.tryAgainButtonLabel": "Réessayer",
     "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription": "La maintenance des panneaux de flux de logs n'est plus assurée. Essayez d'utiliser {savedSearchDocsLink} pour une visualisation similaire.",
     "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription.discoverSessionsLinkLabel": "Sessions Discover",
-    "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.",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -23239,7 +23239,6 @@
     "xpack.infra.logSourceErrorPage.tryAgainButtonLabel": "再試行",
     "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription": "ログストリームパネルは管理されていません。{savedSearchDocsLink}を同様の視覚化に活用してください。",
     "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription.discoverSessionsLinkLabel": "Discoverセッション",
-    "xpack.infra.metadata.pinAriaLabel": "固定されたフィールド",
     "xpack.infra.metadataEmbeddable.AddFilterAriaLabel": "フィルターを追加",
     "xpack.infra.metadataEmbeddable.errorAction": "メタデータを再取得",
     "xpack.infra.metadataEmbeddable.errorMessage": "データの読み込みエラーが発生しました。{refetch}し、ホスト詳細をもう一度開いてください。",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -23283,7 +23283,6 @@
     "xpack.infra.logSourceErrorPage.tryAgainButtonLabel": "重试",
     "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription": "将不再维护日志流面板。尝试将 {savedSearchDocsLink} 用于类似可视化。",
     "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription.discoverSessionsLinkLabel": "Discover 会话",
-    "xpack.infra.metadata.pinAriaLabel": "已固定字段",
     "xpack.infra.metadataEmbeddable.AddFilterAriaLabel": "添加筛选",
     "xpack.infra.metadataEmbeddable.errorAction": "重新提取元数据",
     "xpack.infra.metadataEmbeddable.errorMessage": "加载数据时出错。尝试{refetch}并再次打开主机详情。",
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx b/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>
           </>
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx b/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>
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/metadata/table.tsx b/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]
