Fix type safety, navigation, and XSS issues in SearchResultsListItem

[Copilot]

Addresses type casting violations, React Router bypass, performance inefficiencies, and XSS vulnerabilities in the search results component.

Changes

Type Safety

• Updated onKeyDown prop from React.KeyboardEvent<HTMLLIElement> to React.KeyboardEvent<HTMLAnchorElement>
• Removed unsafe type cast from anchor events to list item events

Navigation

• Removed window.location.href assignment that bypassed React Router
• Delegate to native anchor behavior for SPA navigation

Security

• Move DOMPurify sanitization after ellipsis concatenation to prevent bypass
• Ensure all rendered content goes through sanitization, not just original input

Performance

• Replace document.createElement('div') text extraction with regex /<[^>]+>/g
• Regex output only used for ellipsis detection logic, never rendering

Code Quality

• Rename SanitizedHtmlContent → HighlightedContent (reflects purpose, not implementation)

Before/After

// Before: unsafe cast + full page reload
onKeyDown={(e) => {
    if (e.key === 'Enter') {
        window.location.href = result.url  // SPA bypass
    } else {
        onKeyDown?.(e as unknown as React.KeyboardEvent<HTMLLIElement>, index)  // unsafe
    }
}}

// After: correct types + SPA navigation
onKeyDown={(e) => {
    onKeyDown?.(e, index)  // anchor handles Enter via href
}}

// Before: sanitize then concatenate (XSS risk)
const sanitized = DOMPurify.sanitize(htmlContent, {...})
if (startsLowercase) return '… ' + sanitized

// After: concatenate then sanitize (secure)
let html = htmlContent
if (startsLowercase) html = '… ' + htmlContent
return DOMPurify.sanitize(html, {...})

Original prompt

Please apply the following diffs and create a pull request.
Once the PR is ready, give it a title based on the messages of the fixes being applied.

[{"message":"Type casting from React.KeyboardEvent<HTMLAnchorElement> to React.KeyboardEvent<HTMLLIElement> is unsafe and could cause runtime errors. The event target properties will be incorrect. Consider updating the onKeyDown prop to accept the correct event type or handle the anchor element's keyboard events separately.","fixFiles":[{"filePath":"src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx","diff":"diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n@@ -14,7 +14,7 @@\n interface SearchResultListItemProps {\n     item: SearchResultItem\n     index: number\n-    onKeyDown?: (e: React.KeyboardEvent<HTMLLIElement>, index: number) => void\n+    onKeyDown?: (e: React.KeyboardEvent<HTMLAnchorElement>, index: number) => void\n     setRef?: (element: HTMLAnchorElement | null, index: number) => void\n }\n \n@@ -40,9 +40,9 @@\n                     if (e.key === 'Enter') {\n                         window.location.href = result.url\n                     } else {\n-                        // Type mismatch: event is from anchor but handler expects HTMLLIElement\n+                        // Pass the event to the handler, now correctly typed for anchor element\n                         onKeyDown?.(\n-                            e as unknown as React.KeyboardEvent<HTMLLIElement>,\n+                            e,\n                             index\n                         )\n                     }\n"}]},{"message":"Using window.location.href for navigation bypasses React Router and loses SPA benefits. This will cause a full page reload instead of client-side navigation. Consider using proper navigation methods like React Router's navigate function or allowing the default anchor behavior.","fixFiles":[{"filePath":"src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx","diff":"diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n@@ -37,15 +37,11 @@\n             <a\n                 ref={(el) => setRef?.(el, index)}\n                 onKeyDown={(e) => {\n-                    if (e.key === 'Enter') {\n-                        window.location.href = result.url\n-                    } else {\n-                        // Type mismatch: event is from anchor but handler expects HTMLLIElement\n-                        onKeyDown?.(\n-                            e as unknown as React.KeyboardEvent<HTMLLIElement>,\n-                            index\n-                        )\n-                    }\n+                    // Pass key event to parent if needed\n+                    onKeyDown?.(\n+                        e as unknown as React.KeyboardEvent<HTMLLIElement>,\n+                        index\n+                    )\n                 }}\n                 css={css`\n                     display: flex;\n"}]},{"message":"Creating a DOM element inside useMemo for text extraction is inefficient and can cause performance issues. Consider using a regex or string manipulation to extract text content, or move the DOM creation outside the memoized function if DOM parsing is absolutely necessary.","fixFiles":[{"filePath":"src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx","diff":"diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx\n@@ -182,9 +182,8 @@\n                 KEEP_CONTENT: true,\n             })\n \n-            const temp = document.createElement('div')\n-            temp.innerHTML = sanitized\n-...

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

To ensure robust sanitization when stripping HTML tags, we should repeatedly apply the regular expression until no instances remain. This eliminates cases where partially sanitized input could reintroduce dangerous tags. Alternatively, given that this code only requires extracting plain text via HTML tag removal (not rendering), we could use a well-tested library such as DOMPurify or another HTML-to-text utility. However, since we are constrained to editing only shown code and the context is already using regular expressions for a simple use-case, the best fix here is to apply the replacement in a loop. Specifically, replace line 177 with code that repeatedly replaces all HTML tags until none remain, ensuring that intermediate tags that become valid after a first pass are also removed.