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="azure locations and file crawling">
<meta property="og:title" content="azure locations and file crawling | 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}`);
@ -1710,10 +1710,28 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </h2>
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
<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>print</li>
<li>zine</li>
<li>highlight</li>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
<ul class="postlist-tags">
@ -1724,32 +1742,14 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="" id="dragon-mask">dragon mask </h2>
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="" id="brookes-notebook">brooke&#39;s notebook </h2>
<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
<ul class="postlist-tags">
<li>book</li>
<li>highlight</li>
<li>software</li>
</ul>
</a>
@ -1786,6 +1786,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-05-04T04:19:11.931Z -->
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-05-04T15:35:06.331Z -->
</body>
</html>