move anchor links to aria-labelledby model
This commit is contained in:
@ -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="knit shrimp">
|
||||
<meta property="og:title" content="knit shrimp | 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}`);
|
||||
@ -1483,20 +1483,6 @@ export { HeadingAnchors }</script>
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
|
||||
<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern </h2>
|
||||
|
||||
<img src="/img/keffiyah-nets.jpg" alt="a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later." 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="/pride-dice-bags/">
|
||||
<h2 data-ha-exclude="" id="pride-dice-bags">pride dice bags </h2>
|
||||
@ -1514,10 +1500,24 @@ export { HeadingAnchors }</script>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/sideways-canvas-shirt/">
|
||||
<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt </h2>
|
||||
<a class="postlink" href="/brookes-socks/">
|
||||
<h2 data-ha-exclude="" id="brookes-socks">brooke's socks </h2>
|
||||
|
||||
<img src="/img/sideways-canvas.jpg" alt="someone's torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it's notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
|
||||
<img src="/img/brooke-socks.jpg" alt="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray." 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="/brookes-scarf/">
|
||||
<h2 data-ha-exclude="" id="brookes-scarf">brooke'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">
|
||||
|
||||
@ -1558,6 +1558,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/knit-shrimp/` was built on 2026-05-04T04:19:11.943Z -->
|
||||
<!-- This page `/knit-shrimp/` was built on 2026-05-04T15:35:06.303Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user