chore: Use <mark> element for filtering highlights (#3249)

cloudscape-design · Feb 5, 2025 · 1ade36a · 1ade36a
1 parent 95ab092
commit 1ade36a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/internal/components/option/highlight-match.tsx b/src/internal/components/option/highlight-match.tsx
@@ -25,8 +25,9 @@ interface HighlightMatchProps {
   highlightText?: string;
 }
 
-const Highlight = ({ str }: HighlightMatchProps) =>
-  str ? <span className={styles['filtering-match-highlight']}>{str}</span> : null;
+function Highlight({ str }: HighlightMatchProps) {
+  return str ? <mark className={styles['filtering-match-highlight']}>{str}</mark> : null;
+}
 
 export default function HighlightMatch({ str, highlightText }: HighlightMatchProps) {
   if (!str || !highlightText) {

diff --git a/src/property-filter/__tests__/property-filter-autosuggest.test.tsx b/src/property-filter/__tests__/property-filter-autosuggest.test.tsx
@@ -44,7 +44,9 @@ describe('Property filter autosuggest', () => {
       expect(wrapper.findDropdown().findOption(1)!.getElement()).toHaveTextContent('abc');
     });
     test('is used for highlighting', () => {
-      expect(wrapper.findDropdown().findHighlightedMatches()[0].getElement()).toHaveTextContent('abc');
+      const highlightMatch = wrapper.findDropdown().findHighlightedMatches()[0].getElement();
+      expect(highlightMatch.tagName).toBe('MARK');
+      expect(highlightMatch).toHaveTextContent('abc');
     });
     test('is not used for the enteredText- option', () => {
       expect(wrapper.findEnteredTextOption()!.getElement()).toHaveTextContent('123');