move anchor links to aria-labelledby model

This commit is contained in:
2026-05-04 08:35:44 -07:00
parent 3f9e6727de
commit 914243feb9
284 changed files with 4184 additions and 4113 deletions

View File

@ -9,7 +9,7 @@
<meta name="description" content="Lee Cattarin... on the internet!">
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
<meta property="og:title" content="anarchy autism">
<meta property="og:title" content="anarchy autism | hello hello">
<meta property="og:type" content="website">
<meta property="og:description" content="Lee Cattarin... on the internet!">
<meta property="og:site_name" content="hello hello">
@ -1281,12 +1281,12 @@ class HeadingAnchors extends HTMLElement {
}
}
}
/* no longer used, using aria-labelledby instead - see getAnchorElement
getAccessibleTextPrefix() {
// Useful for i18n
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
}
*/
getContent() {
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
return this.getAttribute(HeadingAnchors.attributes.content);
@ -1320,7 +1320,7 @@ class HeadingAnchors extends HTMLElement {
anchor.classList.add(HeadingAnchors.classes.anchor);
let content = this.getContent();
anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;
anchor.innerHTML = `<span aria-labelledby=${heading.id}>${content}</span>`; // CHANGED HERE
anchor.addEventListener("focus", e => {
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
@ -1501,28 +1501,40 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="" id="rope-one-mature">rope (one) (mature)</h2>
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/rope-print-1.jpg" alt="A print of a nude trans woman in an asymmetrical rope harness." class="blur" loading="lazy" decoding="async" width="1000" height="1242">
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>highlight</li>
<li>gender</li>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/flicker/">
<h2 data-ha-exclude="" id="flicker">flicker </h2>
<a class="postlink" href="/tiny-mushrooms/">
<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms </h2>
<img src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
<ul class="postlist-tags">
<li>print</li>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/swallowtail-on-snowdrops/">
<h2 data-ha-exclude="" id="swallowtail-on-snowdrops">swallowtail on snowdrops </h2>
<img src="/img/swallowtail-on-snowdrops-print.jpg" alt="A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower." loading="lazy" decoding="async" width="1000" height="1332">
<ul class="postlist-tags">
@ -1536,20 +1548,6 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="" id="squarsh">squarsh </h2>
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
<ul class="postlist-tags">
<li>print</li>
</ul>
</a>
</li>
</ol>
</section>
@ -1581,6 +1579,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/anarchy-autism/` was built on 2026-05-04T04:19:11.947Z -->
<!-- This page `/anarchy-autism/` was built on 2026-05-04T15:35:06.313Z -->
</body>
</html>