jeremy.herve.bzh / skypress
A calm place to write long-form, and publish it to the open social web. skypress.blog/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Mention icon: silence 🌀 from screen readers; refresh CSS comment

The in-body mention ::before swapped a masked Bluesky SVG for a 🌀 emoji
via content, which screen readers announce (the mask produced no text).
Use content: "🌀" / "" so the empty alt text keeps it decorative — a
pseudo-element can't take aria-hidden, unlike the author-page emoji span.
Update the stale block comment that still described a masked Bluesky logo.

author
Jeremy Herve date (Jun 19, 2026, 11:23 AM +0200) commit 06af3374 parent 2dd1713d
+7 -5
+7 -5
src/pages/[author]/[slug]/[rkey].astro
··· 265 265 color: var(--sun); 266 266 } 267 267 /* @mentions read as part of the prose and brighten to --sun on hover — the same 268 - treatment as the author handle link on profile pages. The Bluesky logo (left) and an 269 - external-link arrow (right) slide in on hover/focus, drawn as mask pseudo-elements 270 - because the mention arrives as sanitised HTML and can't carry nested <svg> children. 271 - (The sanitiser already gives the anchor target="_blank" + a safe rel.) */ 268 + treatment as the author handle link on profile pages. A 🌀 emoji (left, via ::before 269 + content) and an external-link arrow (right, a mask pseudo-element) slide in on 270 + hover/focus; the arrow is a mask because the mention arrives as sanitised HTML and 271 + can't carry nested <svg> children. The emoji uses `content: "🌀" / ""` so its empty 272 + alt text keeps screen readers from announcing it (a pseudo-element can't take 273 + aria-hidden). (The sanitiser already gives the anchor target="_blank" + a safe rel.) */ 272 274 .reader__article :global(a.skypress-mention) { 273 275 color: inherit; 274 276 text-decoration: none; ··· 297 299 transform 0.15s ease; 298 300 } 299 301 .reader__article :global(a.skypress-mention)::before { 300 - content: "🌀"; 302 + content: "🌀" / ""; 301 303 width: auto; 302 304 height: auto; 303 305 margin-right: 0.15em;