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="on the shoulders of giants">
<meta property="og:title" content="on the shoulders of giants | 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}`);
@ -1498,14 +1498,16 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/textures-unite/">
<h2 data-ha-exclude="" id="textures-unite">textures unite </h2>
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
<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">
<ul class="postlist-tags">
<li>knit</li>
<li>print</li>
<li>zine</li>
<li>highlight</li>
@ -1514,17 +1516,15 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern </h2>
<a class="postlink" href="/knit-shrimp/">
<h2 data-ha-exclude="" id="knit-shrimp">knit shrimp </h2>
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
</a>
</li>
@ -1560,6 +1560,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/on-the-shoulders-of-giants/` was built on 2026-05-04T04:19:11.933Z -->
<!-- This page `/on-the-shoulders-of-giants/` was built on 2026-05-04T15:35:06.332Z -->
</body>
</html>