Skip to content

Use <mark> for search result highlights - #1391

Open
helloigig wants to merge 2 commits into
microbit-foundation:mainfrom
helloigig:search-highlight-mark
Open

helloigig wants to merge 2 commits into
microbit-foundation:mainfrom
helloigig:search-highlight-mark

Conversation

@helloigig

Copy link
Copy Markdown
Contributor

Closes #1249

Search highlights were styled spans, so the highlight was only visual. This renders matched terms as <mark> so assistive technology can pick them up, and inherits the text colour so the look stays the same.

  • Normal and focused states look identical to before (I compared screenshots pixel by pixel).
  • In forced colours mode the highlights were invisible before; they now use the system Mark colours.
  • Added a small component test that checks matched terms get the mark role.

Checked with typecheck, lint, unit tests, the documentation and accessibility e2e tests, and a build. I've checked the accessibility tree in Chromium but haven't yet tried it with a real screen reader, so a quick listen would be welcome.

AI-assisted.

helloigig and others added 2 commits November 4, 2026 00:36
Matched terms were styled spans, so the highlight was only visual.
Render them as <mark> so screen readers can announce them, keeping the
existing look by inheriting the text colour. In forced colours mode the
highlights now use the system Mark colours instead of disappearing.

Closes microbit-foundation#1249
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Switch search highlights to use <mark> for accessibility

2 participants