fix: [ES Serverless home] Multiple 'Learn More' links are ambiguous (e…

…lastic#188325) Closes: elastic/search-team#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">
kibanamachine · Jul 17, 2024 · 788d859 · 788d859
1 parent 0496811
commit 788d859
Showing 1 changed file with 50 additions and 5 deletions.
diff --git 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',
                         {