[ObsPresentation][A11y] Fix asset details flyout header announcement

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -20647,7 +20647,6 @@
     "xpack.infra.assetDetails.datePicker.commonlyUsedRanges.last7Days": "Letzte 7 Tage",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh": "Erleben Sie ständig das Laden von Daten?",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh.troubleshoot": "Versuchen Sie, das Aktualisierungsintervall zu verlängern, den Datumsbereich zu verkürzen oder die automatische Aktualisierung zu deaktivieren.",
-    "xpack.infra.assetDetails.flyout.ariaLabel": "{name} Details",
     "xpack.infra.assetDetails.header.return": "Zurückkehren",
     "xpack.infra.assetDetails.kpi.subtitle.average": "Durchschnitt",
     "xpack.infra.assetDetails.metadata.seeMore.ariaLabel": "Sehen Sie {count} weitere {fieldName}",

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

@@ -20923,7 +20923,6 @@
     "xpack.infra.assetDetails.datePicker.commonlyUsedRanges.last7Days": "7 derniers jours",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh": "Les données chargent continuellement ?",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh.troubleshoot": "Essayez d'augmenter l'intervalle d'actualisation, de raccourcir la plage de dates ou de désactiver l'actualisation automatique.",
-    "xpack.infra.assetDetails.flyout.ariaLabel": "Détails de {name}",
     "xpack.infra.assetDetails.header.return": "Renvoyer",
     "xpack.infra.assetDetails.kpi.subtitle.average": "Moyenne",
     "xpack.infra.assetDetails.metadata.seeMore.ariaLabel": "Voir {count} de plus {fieldName}",

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

@@ -20948,7 +20948,6 @@
     "xpack.infra.assetDetails.datePicker.commonlyUsedRanges.last7Days": "過去7日間",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh": "データの読み込みが継続的に行われていますか？",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh.troubleshoot": "更新間隔を長くするか、日付範囲を短くするか、自動更新をオフにしてみてください。",
-    "xpack.infra.assetDetails.flyout.ariaLabel": "{name}の詳細",
     "xpack.infra.assetDetails.header.return": "戻る",
     "xpack.infra.assetDetails.kpi.subtitle.average": "平均",
     "xpack.infra.assetDetails.metadata.seeMore.ariaLabel": "さらに{count}件の{fieldName}を表示",

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

@@ -20937,7 +20937,6 @@
     "xpack.infra.assetDetails.datePicker.commonlyUsedRanges.last7Days": "过去 7 天",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh": "持续出现加载数据问题？",
     "xpack.infra.assetDetails.datePicker.tooltip.autoRefresh.troubleshoot": "请尝试增加刷新时间间隔，缩短日期范围或关闭自动刷新。",
-    "xpack.infra.assetDetails.flyout.ariaLabel": "{name} 详情",
     "xpack.infra.assetDetails.header.return": "返回",
     "xpack.infra.assetDetails.kpi.subtitle.average": "平均值",
     "xpack.infra.assetDetails.metadata.seeMore.ariaLabel": "查看更多 {count} 个{fieldName}",

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

@@ -21,12 +21,14 @@ import {
 import { css } from '@emotion/react';
 import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common/inventory_models/types';
 import type { DataSchemaFormat } from '@kbn/metrics-data-access-plugin/common';
+import { i18n } from '@kbn/i18n';
 import { HostHeaderTitle } from './host_header_title';
 
 type Props = Pick<EuiPageHeaderProps, 'tabs' | 'title' | 'rightSideItems'> & {
   entityType: InventoryItemType;
   loading: boolean;
   schema?: DataSchemaFormat | null;
+  headingId?: string;
 };
 
 export const FlyoutHeader = ({
@@ -36,6 +38,7 @@ export const FlyoutHeader = ({
   entityType,
   loading,
   schema,
+  headingId,
 }: Props) => {
   const { euiTheme } = useEuiTheme();
 
@@ -58,7 +61,13 @@ export const FlyoutHeader = ({
             {loading ? (
               <EuiLoadingSpinner size="m" />
             ) : (
-              <h4>
+              <h4
+                id={headingId}
+                aria-label={i18n.translate('xpack.infra.assetDetails.flyout.ariaLabel', {
+                  defaultMessage: '{entityType} {title} details',
+                  values: { entityType, title },
+                })}
+              >
                 {entityType === 'host' ? <HostHeaderTitle title={title} schema={schema} /> : title}
               </h4>
             )}

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

@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '@elastic/eui';
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, useGeneratedHtmlId } from '@elastic/eui';
 import React, { useCallback, useEffect } from 'react';
-import { i18n } from '@kbn/i18n';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { ASSET_DETAILS_FLYOUT_COMPONENT_NAME } from '../constants';
 import { Content } from '../content/content';
@@ -47,16 +46,15 @@ export const Flyout = ({
     closeFlyout();
   }, [closeFlyout, setUrlState]);
 
+  const headingId = useGeneratedHtmlId({ prefix: 'assetDetailsFlyoutTitle' });
+
   return (
     <EuiFlyout
       onClose={handleOnClose}
       data-component-name={ASSET_DETAILS_FLYOUT_COMPONENT_NAME}
       data-asset-type={entity.type}
       data-schema-selected={schema}
-      aria-labelledby={i18n.translate('xpack.infra.assetDetails.flyout.ariaLabel', {
-        defaultMessage: '{name} details',
-        values: { name: entity.name },
-      })}
+      aria-labelledby={headingId}
     >
       <>
         <EuiFlyoutHeader hasBorder>
@@ -67,6 +65,7 @@ export const Flyout = ({
             entityType={entity.type}
             loading={loading}
             schema={schema}
+            headingId={headingId}
           />
         </EuiFlyoutHeader>
         <EuiFlyoutBody>