From b209fa2630be6735218f7fc25723c7c3916c6e49 Mon Sep 17 00:00:00 2001 From: Miriam <31922082+MiriamAparicio@users.noreply.github.com> Date: Wed, 9 Apr 2025 08:41:30 +0100 Subject: [PATCH] [ObsUx][A11y] Add unique accessible lables to metadata table (#217496) Closes https://github.com/elastic/kibana/issues/194972 ## Summary Add unique accessible labels to metadata table ### How to test Use a screen reader to navigate the table On Host details, Metadata tab 1. Verify the first column in the table header announces Pin Fields column Screenshot 2025-04-08 at 12 38 28 2. Verify the Pin column row announces which field pins Screenshot 2025-04-08 at 12 38 45 Screenshot 2025-04-08 at 12 39 14 3. Verify the "+ x more" does announce more of which field Screenshot 2025-04-08 at 12 39 35 (cherry picked from commit 92a9f8531afa6bb93719db65f4637607c9435beb) # Conflicts: # x-pack/platform/plugins/private/translations/translations/fr-FR.json # x-pack/platform/plugins/private/translations/translations/ja-JP.json # x-pack/platform/plugins/private/translations/translations/zh-CN.json --- .../translations/translations/fr-FR.json | 9 +-------- .../translations/translations/ja-JP.json | 9 +-------- .../translations/translations/zh-CN.json | 9 +-------- .../components/expandable_content.tsx | 11 ++++++---- .../tabs/metadata/add_pin_to_row.tsx | 20 +++++++++++-------- .../asset_details/tabs/metadata/table.tsx | 13 ++++++++++-- 6 files changed, 33 insertions(+), 38 deletions(-) diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json index be61f13aa5a24..62720412dc785 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -25380,13 +25380,6 @@ "xpack.infra.logsSettingsPage.loadingButtonLabel": "Chargement", "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.logStreamEmbeddable.description": "Ajoutez un tableau de logs de diffusion en direct. Pour une expérience plus efficace, nous vous recommandons d'utiliser la page Découvrir pour créer une session Discovery au lieu d'utiliser Logs Stream.", - "xpack.infra.logStreamEmbeddable.displayName": "Logs Stream (déclassé)", - "xpack.infra.logStreamEmbeddable.title": "Flux de log", - "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 +51786,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." } -} +} \ No newline at end of file diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json index 37926cb37681f..7b72d3a134398 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -25358,13 +25358,6 @@ "xpack.infra.logsSettingsPage.loadingButtonLabel": "読み込み中", "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription": "ログストリームパネルは管理されていません。{savedSearchDocsLink}を同様の視覚化に活用してください。", "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription.discoverSessionsLinkLabel": "Discoverセッション", - "xpack.infra.logStreamEmbeddable.description": "ライブストリーミングログのテーブルを追加します。体験を効率化するために、ログストリームを使用するのではなく、検出ページを使用して、保存されたDiscoverセッションを作成することをお勧めします。", - "xpack.infra.logStreamEmbeddable.displayName": "ログストリーム（廃止予定）", - "xpack.infra.logStreamEmbeddable.title": "ログストリーム", - "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 +51747,4 @@ "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。", "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。" } -} +} \ No newline at end of file diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json index 564c0071a1762..074294fa267b3 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -25411,13 +25411,6 @@ "xpack.infra.logsSettingsPage.loadingButtonLabel": "正在加载", "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription": "将不再维护日志流面板。尝试将 {savedSearchDocsLink} 用于类似可视化。", "xpack.infra.logsStreamEmbeddable.deprecationWarningDescription.discoverSessionsLinkLabel": "Discover 会话", - "xpack.infra.logStreamEmbeddable.description": "添加实时流式传输日志的表。为了获得更高效的体验，建议使用 Discover 页面创建保存的 Discover 会话，而不是使用日志流。", - "xpack.infra.logStreamEmbeddable.displayName": "日志流（已过时）", - "xpack.infra.logStreamEmbeddable.title": "日志流", - "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 +51831,4 @@ "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。", "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。" } -} +} \ No newline at end of file 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 index f013faaeed8e7..e58dfb84628de 100644 --- 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(null); const showMoreRef = useRef(null); @@ -50,15 +51,17 @@ export const ExpandableContent = (props: ExpandableContentProps) => { <> 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 index 5b7ef55ce8aa0..2989dbb84046c 100644 --- 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 | 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 ( - + 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 index 8ab34376b2766..052a8ee88308c 100644 --- 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: , + name: ( + + ), 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) => , + render: (_name: string, item: Field) => ( + + ), }, ], [pinnedItems, setPinnedItems]