Use <mark> for search result highlights

src/documentation/search/SearchResultList.test.tsx

@@ -0,0 +1,42 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { render, screen } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { MemoryRouter } from "react-router";
+import { Result } from "./common";
+import SearchResultList from "./SearchResultList";
+
+describe("SearchResultList", () => {
+  it("marks matched terms so assistive technology can announce them", () => {
+    const result: Result = {
+      id: "loops",
+      navigation: { tab: "reference", slug: { id: "loops" } },
+      containerTitle: "Loops",
+      title: "Loops",
+      extract: {
+        title: [{ type: "match", extract: "Loops" }],
+        content: [
+          { type: "match", extract: "Loops" },
+          { type: "text", extract: " repeat sections of code." },
+        ],
+      },
+    };
+    render(
+      <IntlProvider locale="en">
+        <MemoryRouter>
+          <SearchResultList
+            title="Reference"
+            results={[result]}
+            viewedResults={[]}
+            onViewResult={() => {}}
+          />
+        </MemoryRouter>
+      </IntlProvider>
+    );
+    const marks = screen.getAllByRole("mark");
+    expect(marks.map((m) => m.textContent)).toEqual(["Loops", "Loops"]);
+  });
+});

src/documentation/search/SearchResultList.tsx

@@ -116,8 +116,15 @@ const ExtractText = ({ extract, title, ...props }: ExtractTextProps) => {
             {t.extract}
           </Text>
         ) : (
-          // eslint-disable-next-line @eslint-react/no-array-index-key -- position is the only identity here
-          <Text key={i} as="span" bgColor="#6C4BC14D" borderRadius="md" p="0.5">
+          <Text
+            // eslint-disable-next-line @eslint-react/no-array-index-key -- position is the only identity here
+            key={i}
+            as="mark"
+            color="inherit"
+            bgColor="#6C4BC14D"
+            borderRadius="md"
+            p="0.5"
+          >
             {t.extract}
           </Text>
         )