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="an intro to git">
|
||||
<meta property="og:title" content="an intro to git | 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}`);
|
||||
@ -1894,10 +1894,10 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/my-favorite-git-flag/">
|
||||
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
|
||||
<a class="postlink" href="/moving-images/">
|
||||
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
|
||||
|
||||
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<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">
|
||||
|
||||
@ -1908,10 +1908,10 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
|
||||
<a class="postlink" href="/redirections/">
|
||||
<h2 data-ha-exclude="" id="redirections">redirections </h2>
|
||||
|
||||
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@ -1922,17 +1922,15 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/azure-locations-and-file-crawling/">
|
||||
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling </h2>
|
||||
<a class="postlink" href="/eleventy-lessons/">
|
||||
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </h2>
|
||||
|
||||
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
|
||||
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
@ -1968,6 +1966,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/an-intro-to-git/` was built on 2026-05-04T04:19:11.928Z -->
|
||||
<!-- This page `/an-intro-to-git/` was built on 2026-05-04T15:35:06.335Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user