fix: [Home > Applications > Services > Add Data] Ambiguous links (Lea…

…rn More) (#191072)

Part of:
https://github.com/elastic/observability-accessibility/issues/129

This PR addresses only the 'Learn More' section of the reported issue.
The issue concerning the `Copy` button will be addressed first on the
EUI side.

# What was changed: 

1. `EuiMarkdownFormat` has been removed in favor of using `EuiLink` and
`EuiText`.
2. Required `aria-label` attribute was added

# Screen 

<img width="1117" alt="image"
src="https://github.com/user-attachments/assets/66865703-92a5-4986-9b4e-573c5bd95fbc">

x-pack/plugins/observability_solution/apm/public/components/app/onboarding/introduction.tsx

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { EuiBetaBadge, EuiImage, EuiMarkdownFormat, EuiPageHeader } from '@elastic/eui';
+import { EuiBetaBadge, EuiImage, EuiPageHeader, EuiLink, EuiText } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibanaUrl } from '../../../hooks/use_kibana_url';
 
 interface IntroductionProps {
@@ -38,17 +39,6 @@ export function Introduction({ isBeta, guideLink }: IntroductionProps) {
     />,
   ];
 
-  const description = i18n.translate('xpack.apm.onboarding.specProvider.longDescription', {
-    defaultMessage:
-      'Application Performance Monitoring (APM) collects in-depth \
-performance metrics and errors from inside your application. \
-It allows you to monitor the performance of thousands of applications in real time. \
-[Learn more]({learnMoreLink}).',
-    values: {
-      learnMoreLink: guideLink,
-    },
-  });
-
   return (
     <>
       <EuiPageHeader
@@ -66,7 +56,36 @@ It allows you to monitor the performance of thousands of applications in real ti
             )}
           </>
         }
-        description={<EuiMarkdownFormat>{description}</EuiMarkdownFormat>}
+        description={
+          <EuiText>
+            <FormattedMessage
+              id="xpack.apm.onboarding.specProvider.longDescription"
+              defaultMessage="Application Performance Monitoring (APM) collects in-depth \
+            performance metrics and errors from inside your application. \
+            It allows you to monitor the performance of thousands of applications in real time. \
+            {learnMoreLink}."
+              values={{
+                learnMoreLink: (
+                  <EuiLink
+                    data-test-subj="apmIntroductionLearnMoreLink"
+                    href={guideLink}
+                    aria-label={i18n.translate(
+                      'xpack.apm.onboarding.specProvider.learnMoreAriaLabel',
+                      {
+                        defaultMessage: 'Learn more about APM',
+                      }
+                    )}
+                    target="_blank"
+                  >
+                    {i18n.translate('xpack.apm.onboarding.specProvider.learnMoreLabel', {
+                      defaultMessage: 'Learn more',
+                    })}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        }
         rightSideItems={rightSideItems}
       />
     </>

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

@@ -10931,7 +10931,7 @@
     "xpack.apm.onboarding.shared_clients.configure.commands.serverUrlHint": "Définir l'URL personnalisée du serveur APM (par défaut : {defaultApmServerUrl}). L'URL doit être complète et inclure le protocole (http ou https) et le port.",
     "xpack.apm.onboarding.shared_clients.configure.commands.serviceEnvironmentHint": "Le nom de l'environnement dans lequel ce service est déployé, par exemple \"production\" ou \"test\". Les environnements vous permettent de facilement filtrer les données à un niveau global dans l'interface utilisateur APM. Il est important de garantir la cohérence des noms d'environnements entre les différents agents.",
     "xpack.apm.onboarding.shared_clients.configure.commands.serviceNameHint": "Le nom de service est le filtre principal dans l'interface utilisateur APM et est utilisé pour regrouper les erreurs et suivre les données ensemble. Caractères autorisés : a-z, A-Z, 0-9, -, _ et espace.",
-    "xpack.apm.onboarding.specProvider.longDescription": "Le monitoring des performances applicatives (APM) collecte les indicateurs et les erreurs de performance approfondies depuis votre application. Cela vous permet de monitorer les performances de milliers d'applications en temps réel. [Learn more]({learnMoreLink}).",
+    "xpack.apm.onboarding.specProvider.longDescription": "Le monitoring des performances applicatives (APM) collecte les indicateurs et les erreurs de performance approfondies depuis votre application. Cela vous permet de monitorer les performances de milliers d'applications en temps réel. {learnMoreLink}.",
     "xpack.apm.pages.alertDetails.alertSummary.actualValue": "Valeur réelle",
     "xpack.apm.pages.alertDetails.alertSummary.expectedValue": "Valeur attendue",
     "xpack.apm.percentOfParent": "({value} de {parentType, select, transaction { transaction } trace {trace} other {parentType inconnu} })",

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

@@ -10920,7 +10920,7 @@
     "xpack.apm.onboarding.shared_clients.configure.commands.serverUrlHint": "カスタム APM Server URL（デフォルト：{defaultApmServerUrl}）を設定します。URLはプロトコル（httpまたはhttps）とポートを含む完全修飾URLでなければなりません。",
     "xpack.apm.onboarding.shared_clients.configure.commands.serviceEnvironmentHint": "このサービスがデプロイされている環境の名前（例：「本番」、「ステージング」）。環境では、APM UIでグローバルレベルで簡単にデータをフィルタリングできます。すべてのエージェントで環境の命名方法を統一することが重要です。",
     "xpack.apm.onboarding.shared_clients.configure.commands.serviceNameHint": "このサービス名はAPM UIの主フィルターであり、エラーとトレースデータをグループ化するために使用されます。使用できる文字はA-Z、0-9、-、_、スペースです。",
-    "xpack.apm.onboarding.specProvider.longDescription": "アプリケーションパフォーマンスモニタリング（APM）は、アプリケーション内から詳細なパフォーマンスメトリックやエラーを収集します。何千ものアプリケーションのパフォーマンスをリアルタイムで監視できます。[詳細]（{learnMoreLink}）。",
+    "xpack.apm.onboarding.specProvider.longDescription": "アプリケーションパフォーマンスモニタリング（APM）は、アプリケーション内から詳細なパフォーマンスメトリックやエラーを収集します。何千ものアプリケーションのパフォーマンスをリアルタイムで監視できます。{learnMoreLink}。",
     "xpack.apm.pages.alertDetails.alertSummary.actualValue": "実際の値",
     "xpack.apm.pages.alertDetails.alertSummary.expectedValue": "想定された値",
     "xpack.apm.percentOfParent": "（{value} of {parentType, select, transaction { トランザクション } trace {トレース} other {不明なparentType} }）",

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

@@ -10939,7 +10939,7 @@
     "xpack.apm.onboarding.shared_clients.configure.commands.serverUrlHint": "设置定制 APM Server URL（默认值：{defaultApmServerUrl}）。此 URL 必须为完全限定 URL，包括协议（http 或 https）和端口。",
     "xpack.apm.onboarding.shared_clients.configure.commands.serviceEnvironmentHint": "在其中部署此服务的环境的名称，如“生产”或“暂存”。在 APM UI 中，您可以通过环境在全局级别轻松筛选数据。跨代理命名环境时，保持一致至关重要。",
     "xpack.apm.onboarding.shared_clients.configure.commands.serviceNameHint": "服务名称是 APM UI 中的初级筛选，用于分组错误并跟踪数据。允许使用的字符包括 a-z、A-Z、0-9、-、_ 和空格。",
-    "xpack.apm.onboarding.specProvider.longDescription": "应用程序性能监测 (APM) 从您的应用程序内收集深入全面的性能指标和错误。其允许您实时监测数以千计的应用程序的性能。[了解详情]({learnMoreLink})。",
+    "xpack.apm.onboarding.specProvider.longDescription": "应用程序性能监测 (APM) 从您的应用程序内收集深入全面的性能指标和错误。其允许您实时监测数以千计的应用程序的性能。{learnMoreLink}。",
     "xpack.apm.pages.alertDetails.alertSummary.actualValue": "实际值",
     "xpack.apm.pages.alertDetails.alertSummary.expectedValue": "预期值",
     "xpack.apm.percentOfParent": "({parentType, select, transaction {事务} trace {追溯} other {parentType 未知}}的 {value})",