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="trans rights skull">
|
||||
<meta property="og:title" content="trans rights skull | 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}`);
|
||||
@ -1508,17 +1508,17 @@ prints/cards: black with blue and pink letters</p>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
<a class="postlink" href="/kestrel-zine/">
|
||||
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
|
||||
|
||||
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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>card</li>
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
@ -1526,32 +1526,36 @@ prints/cards: black with blue and pink letters</p>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/bottom-growth/">
|
||||
<h2 data-ha-exclude="" id="bottom-growth-mature">bottom growth (mature)</h2>
|
||||
<a class="postlink" href="/anarchy-autism/">
|
||||
<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism </h2>
|
||||
|
||||
<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." class="blur" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>gender</li>
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/congrats-on-the-autism-adhd/">
|
||||
<h2 data-ha-exclude="" id="congrats-on-the-autism-adhd">congrats on the autism/adhd </h2>
|
||||
<a class="postlink" href="/luminescent/">
|
||||
<h2 data-ha-exclude="" id="luminescent-mature">luminescent (mature)</h2>
|
||||
|
||||
<img src="/img/congrats-on-the.jpg" alt="4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows." loading="lazy" decoding="async" width="1000" height="562">
|
||||
<img src="/img/luminescent-print.jpg" alt="A print of a tattooed woman in bright highlighter yellow underwear." class="blur" loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
@ -1588,6 +1592,6 @@ prints/cards: black with blue and pink letters</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/trans-rights-skull/` was built on 2026-05-04T04:19:11.942Z -->
|
||||
<!-- This page `/trans-rights-skull/` was built on 2026-05-04T15:35:06.302Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user