From 788d859eecb9124d579170f25a5ff68a047a7ad5 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 17 Jul 2024 21:51:13 +0300
Subject: [PATCH] fix: [ES Serverless home]  Multiple 'Learn More' links are
 ambiguous (#188325)

Closes: https://github.com/elastic/search-team/issues/7623

## Description

Multiple 'Learn More' links are ambiguous. They are not programmatically
associated to their respective topics. Also, screen reader does not
inform user that it will open in a new tab or window.

## Steps to Reproduce
1. Open a Search `Serverless` project.
2. Navigate to the `Search` project homepage.

## What was changed?:

1. Required `aria-label` attributes were added

## Screen:

<img width="1146" alt="image"
src="https://github.com/user-attachments/assets/ebf28412-583f-4f56-af71-857b0c47c98c">
---
 .../components/preprocess_data.tsx            | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/packages/kbn-search-api-panels/components/preprocess_data.tsx b/packages/kbn-search-api-panels/components/preprocess_data.tsx
index d1c10c5218ba1..776fb4c214666 100644
--- a/packages/kbn-search-api-panels/components/preprocess_data.tsx
+++ b/packages/kbn-search-api-panels/components/preprocess_data.tsx
@@ -73,7 +73,16 @@ export const PreprocessDataPanel: React.FC<{
                 <EuiSpacer size="s" />
                 <EuiText>
                   <p>
-                    <EuiLink href={docLinks.dataEnrichment} target="_blank">
+                    <EuiLink
+                      href={docLinks.dataEnrichment}
+                      target="_blank"
+                      aria-label={i18n.translate(
+                        'searchApiPanels.preprocessData.overview.dataEnrichment.learnMore.ariaLabel',
+                        {
+                          defaultMessage: 'Learn more about data enrichment',
+                        }
+                      )}
+                    >
                       {i18n.translate(
                         'searchApiPanels.preprocessData.overview.dataEnrichment.learnMore',
                         {
@@ -109,7 +118,16 @@ export const PreprocessDataPanel: React.FC<{
                 <EuiSpacer size="s" />
                 <EuiText>
                   <p>
-                    <EuiLink href={docLinks.dataFiltering} target="_blank">
+                    <EuiLink
+                      href={docLinks.dataFiltering}
+                      target="_blank"
+                      aria-label={i18n.translate(
+                        'searchApiPanels.preprocessData.overview.dataFiltering.learnMore.ariaLabel',
+                        {
+                          defaultMessage: 'Learn more about data filtering',
+                        }
+                      )}
+                    >
                       {i18n.translate(
                         'searchApiPanels.preprocessData.overview.dataFiltering.learnMore',
                         {
@@ -147,7 +165,16 @@ export const PreprocessDataPanel: React.FC<{
                 <EuiSpacer size="s" />
                 <EuiText>
                   <p>
-                    <EuiLink href={docLinks.arrayOrJson} target="_blank">
+                    <EuiLink
+                      href={docLinks.arrayOrJson}
+                      target="_blank"
+                      aria-label={i18n.translate(
+                        'searchApiPanels.preprocessData.overview.arrayJsonHandling.learnMore.ariaLabel',
+                        {
+                          defaultMessage: 'Learn more about array/JSON handling',
+                        }
+                      )}
+                    >
                       {i18n.translate(
                         'searchApiPanels.preprocessData.overview.arrayJsonHandling.learnMore',
                         {
@@ -186,7 +213,16 @@ export const PreprocessDataPanel: React.FC<{
                 <EuiSpacer size="s" />
                 <EuiText size="s">
                   <p>
-                    <EuiLink href={docLinks.dataTransformation} target="_blank">
+                    <EuiLink
+                      href={docLinks.dataTransformation}
+                      target="_blank"
+                      aria-label={i18n.translate(
+                        'searchApiPanels.preprocessData.overview.dataTransformation.learnMore.ariaLabel',
+                        {
+                          defaultMessage: 'Learn more about data transformation',
+                        }
+                      )}
+                    >
                       {i18n.translate(
                         'searchApiPanels.preprocessData.overview.dataTransformation.learnMore',
                         {
@@ -225,7 +261,16 @@ export const PreprocessDataPanel: React.FC<{
                 <EuiSpacer size="s" />
                 <EuiText>
                   <p>
-                    <EuiLink href={docLinks.pipelineHandling} target="_blank">
+                    <EuiLink
+                      href={docLinks.pipelineHandling}
+                      target="_blank"
+                      aria-label={i18n.translate(
+                        'searchApiPanels.preprocessData.overview.pipelineHandling.learnMore.ariaLabel',
+                        {
+                          defaultMessage: 'Learn more about pipeline handling',
+                        }
+                      )}
+                    >
                       {i18n.translate(
                         'searchApiPanels.preprocessData.overview.pipelineHandling.learnMore',
                         {