From ebeecd86be4114a985d01e4a555c078592cfdd3c Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Sun, 14 Jul 2024 19:03:56 +0800
Subject: [PATCH] Use aria-labelledby to label custom webring widgets

---
 src/links/websites.njk | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/links/websites.njk b/src/links/websites.njk
index 2946fa51..b250cc3c 100644
--- a/src/links/websites.njk
+++ b/src/links/websites.njk
@@ -83,8 +83,8 @@ date: 2023-01-28
         <iframe id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=Leilukin"></iframe>
     </li>
     <li>
-        <nav class="webring">
-            <p class="webring__name"><a href="https://cs.sjoy.lol/">CSS JOY Webring</a></p>
+        <nav class="webring" aria-labelledby="css-joy-name">
+            <p class="webring__name" id="css-joy-name"><a href="https://cs.sjoy.lol/">CSS JOY Webring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a class="external-link" href="https://webri.ng/webring/cssjoy/previous?via=https://leilukin.com/">Previous Site</a>
@@ -107,8 +107,8 @@ date: 2023-01-28
         <script>
             document.addEventListener("DOMContentLoaded", function() { eggring.createLinks(); });
         </script>
-        <nav class="webring">
-            <p class="webring__name">🥚 <a id="eggringIndex" href="https://eggring.neocities.org/">The Eggring</a> 🥚</p>
+        <nav class="webring" aria-labelledby="eggring-name">
+            <p class="webring__name" id="eggring-name">🥚 <a id="eggringIndex" href="https://eggring.neocities.org/">The Eggring</a> 🥚</p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a id="eggringPrev" href="https://confetticake.neocities.org/">Previous Site</a>
@@ -130,8 +130,8 @@ date: 2023-01-28
         </div>
     </li>
     <li>
-        <nav class="webring">
-            <p class="webring__name"><a href="https://ghostring.neocities.org/">Ghostring</a></p>
+        <nav class="webring" aria-labelledby="ghostring-name">
+            <p class="webring__name" id="ghostring-name"><a href="https://ghostring.neocities.org/">Ghostring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a href="https://ghostring.neocities.org/leilukin/previous">Previous Site</a>
@@ -143,8 +143,8 @@ date: 2023-01-28
         </nav>
     </li>
     <li>
-        <nav class="webring">
-            <p class="webring__name">An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍</p>
+        <nav class="webring" aria-labelledby="indieweb-webring-name">
+            <p class="webring__name" id="indieweb-webring-name">An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍</p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a href="https://xn--sr8hvo.ws/previous">Previous Site</a>
@@ -159,8 +159,8 @@ date: 2023-01-28
         <journal-ring icon="lavender"></journal-ring><script async src="https://cdn.jsdelivr.net/gh/js044/nenrikido@main/static/js/misc/journalring.js"></script>
     </li>
     <li>
-        <nav class="webring">
-            <p class="webring__name"><a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a></p>
+        <nav class="webring" aria-labelledby="loopring-name">
+            <p class="webring__name" id="loopring-name"><a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a href="https://loop.graycot.dev/webring.html?action=prev">Previous Site</a>
@@ -191,8 +191,8 @@ date: 2023-01-28
         </div>
     </li>
     <li>
-        <nav class="webring">
-            <p class="webring__name"><a href="https://ghostring.neocities.org/">The retronaut webring</a></p>
+        <nav class="webring" aria-labelledby="retronaut-name">
+            <p class="webring__name" id="retronaut-name"><a href="https://ghostring.neocities.org/">The retronaut webring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a class="external-link" href="https://webring.dinhe.net/prev/https://leilukin.com/">Previous Site</a>