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="pink socks">
<meta property="og:title" content="pink socks | 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}`);
@ -1478,20 +1478,6 @@ export { HeadingAnchors }</script>
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/knit-shrimp/">
<h2 data-ha-exclude="" id="knit-shrimp">knit shrimp </h2>
<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>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants </h2>
@ -1522,6 +1508,20 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-scarf/">
<h2 data-ha-exclude="" id="brookes-scarf">brooke&#39;s scarf </h2>
<img src="/img/brooke-scarf.jpg" alt="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes." loading="lazy" decoding="async" width="1000" height="1333">
<ul class="postlist-tags">
<li>knit</li>
</ul>
</a>
</li>
</ol>
</section>
@ -1553,6 +1553,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/pink-socks/` was built on 2026-05-04T04:19:11.920Z -->
<!-- This page `/pink-socks/` was built on 2026-05-04T15:35:06.297Z -->
</body>
</html>