From 5ee21f512c740acdf7ec4ba9b970f9e4089f663e Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 14 Jul 2024 11:19:35 +0800
Subject: [PATCH] Use aria-labelledby for sidebar navigation landmarks

---
 eleventy.config.md.js              | 2 +-
 src/_includes/global/toc.njk       | 2 +-
 src/_includes/main/content-nav.njk | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/eleventy.config.md.js b/eleventy.config.md.js
index a7fb6989..7cc15416 100644
--- a/eleventy.config.md.js
+++ b/eleventy.config.md.js
@@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(pluginTOC, {
         tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
         wrapper: function (toc) {
-            return `<nav class="toc" aria-label="Table of contents">${toc}</nav>`;
+            return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
         },
     });
     eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
diff --git a/src/_includes/global/toc.njk b/src/_includes/global/toc.njk
index 4b18a76c..0fa1ffdd 100644
--- a/src/_includes/global/toc.njk
+++ b/src/_includes/global/toc.njk
@@ -1,7 +1,7 @@
 <aside class="left-sidebar" aria-label="Left sidebar">
     <details-utils force-open="(min-width: 60rem)" force-restore>
         <details class="toc__wrapper sidebar--sticky">
-            <summary class="toc__heading">
+            <summary class="toc__heading" id="toc-heading">
                 Table of Contents
             </summary>
             {{ content | toc | safe }}
diff --git a/src/_includes/main/content-nav.njk b/src/_includes/main/content-nav.njk
index 61bc0011..750d9462 100644
--- a/src/_includes/main/content-nav.njk
+++ b/src/_includes/main/content-nav.njk
@@ -1,6 +1,6 @@
 <aside class="right-sidebar" aria-label="Right sidebar">
-    <nav class="content__nav sidebar--sticky" aria-label="Sidebar">
-        <h2 class="content__nav--title">My Contents</h2>
+    <nav class="content__nav sidebar--sticky" aria-labelledby="my-contents">
+        <h2 class="content__nav--title" id="my-contents">My Contents</h2>
         <ul class="content__nav--links">
             {% for archive in collections.archive %}
                 <li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>