[Discover][A11y] Add underline to search result highlights

src/core/packages/chrome/layout/core-chrome-layout/layouts/common/global_app_styles.tsx

@@ -11,14 +11,19 @@ import { type UseEuiTheme, useEuiTheme } from '@elastic/eui';
 import { css, Global } from '@emotion/react';
 import React from 'react';
 
-// Due to pure HTML and the scope being large, we decided to temporarily apply following 3 style blocks globally.
+// Due to pure HTML and the scope being large, we decided to temporarily apply following 4 style blocks globally.
 // TODO: refactor within github issue #223571
 const hackGlobalFieldFormattersPluginStyles = (euiTheme: UseEuiTheme['euiTheme']) => css`
   // Styles applied to the span.ffArray__highlight from FieldFormat class that is used to visually distinguish array delimiters when rendering array values as HTML in Kibana field formatters
   .ffArray__highlight {
     color: ${euiTheme.colors.mediumShade};
   }
 
+  // Styles applied to the span.ffSearch__highlight from FieldFormat class that is used to visually distinguish highlighted string values when rendering string values as HTML in Kibana field formatters
+  .ffSearch__highlight {
+    text-decoration: dotted underline;
+  }
+
   // Styles applied to the span.ffString__emptyValue from FieldFormat class that is used to visually distinguish empty string values when rendering string values as HTML in Kibana field formatters
   .ffString__emptyValue {
     color: ${euiTheme.colors.darkShade};

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/utils/truncate_preserve_highlight_tags.ts

@@ -9,7 +9,7 @@
 
 function extractTextAndMarkTags(html: string) {
   const markTags: string[] = [];
-  const cleanText = html.replace(/<\/?mark>/g, (match) => {
+  const cleanText = html.replace(/<\/?mark[^>]*>/g, (match) => {
     markTags.push(match);
     return '';
   });

src/platform/plugins/shared/field_formats/common/converters/string.test.ts

@@ -124,6 +124,6 @@ describe('String Format', () => {
           },
         })
       )
-    ).toBe('<mark>&lt;img /&gt;</mark>');
+    ).toBe('<mark class="ffSearch__highlight">&lt;img /&gt;</mark>');
   });
 });

src/platform/plugins/shared/field_formats/common/utils/highlight/html_tags.ts

@@ -9,6 +9,6 @@
 
 // These are the html tags that will replace the highlight tags.
 export const htmlTags = {
-  pre: '<mark>',
+  pre: '<mark class="ffSearch__highlight">',
   post: '</mark>',
 };