fix(blog): make .is-hidden global, strip HTML tags from search text, add role=search

Final-review findings:

- .is-hidden was scoped to blog/index.astro, so it didn't match PostRow
  or YearHead roots (which carry their own component scope hashes). Net
  effect: the filter visibly only hid the featured article, while all
  archive rows + year heads stayed on screen. Wrap in :global() so the
  runtime-toggled class actually fires its display rule everywhere.
- buildSearchText regex stripped > but not <, so inline HTML open-tags
  like <span class="leadin"> leaked into data-search. Add < to the
  character class so the haystack stays plain text.
- Add role="search" landmark to the BlogSearch wrapper so screen-reader
  users can navigate to it directly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Josh Bairstow 2026-06-02 01:45:27 +10:00
parent 75e7859146
commit d80cd255d4
2 changed files with 5 additions and 3 deletions

View file

@ -43,7 +43,7 @@ function buildSearchText(post: (typeof posts)[number]): string {
return parts
.join(" ")
.toLowerCase()
.replace(/[#*_>`\[\]()]/g, " ")
.replace(/[<>#*_`\[\]()]/g, " ")
.replace(/\s+/g, " ")
.trim();
}
@ -265,7 +265,9 @@ for (const post of posts) {
.feature .img { order: -1; aspect-ratio: 16 / 9; }
}
.is-hidden { display: none !important; }
/* :global so the runtime-toggled class reaches PostRow and YearHead roots,
which carry their own component scope hashes — not this page's. */
:global(.is-hidden) { display: none !important; }
.empty {
font-family: var(--font-mono);