From eb5f26348abc92c7c5ef4ba98ab7d822f18e5080 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 14 Jul 2024 10:52:19 +0800
Subject: [PATCH] Add unique aria labels to landmarks

---
 eleventy.config.md.js              | 7 ++++++-
 src/_includes/global/content.njk   | 6 ++----
 src/_includes/global/navbar.njk    | 4 ++--
 src/_includes/global/toc.njk       | 2 +-
 src/_includes/main/content-nav.njk | 4 ++--
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/eleventy.config.md.js b/eleventy.config.md.js
index 792f1af7..a7fb6989 100644
--- a/eleventy.config.md.js
+++ b/eleventy.config.md.js
@@ -12,7 +12,12 @@ const markdownItAnchor = require("markdown-it-anchor");
 
 module.exports = function (eleventyConfig) {
     // Installed Plugins
-    eleventyConfig.addPlugin(pluginTOC, { tags: ['h2', 'h3', 'h4', 'h5'] });
+    eleventyConfig.addPlugin(pluginTOC, {
+        tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
+        wrapper: function (toc) {
+            return `<nav class="toc" aria-label="Table of contents">${toc}</nav>`;
+        },
+    });
     eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
 
     // Configure slug filter
diff --git a/src/_includes/global/content.njk b/src/_includes/global/content.njk
index 5eef6459..3bda6ec9 100644
--- a/src/_includes/global/content.njk
+++ b/src/_includes/global/content.njk
@@ -1,7 +1,6 @@
 <header class="main__header">
     {% if isArticle or hasBreadcrumbs %}
-        <nav>
-            <h2 class="visually-hidden">Breadcrumbs</h2>
+        <nav aria-label="Breadcrumbs">
             <ol class="breadcrumbs">
                 {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle or pageTitle or title) %}
                 {%- for entry in breadcrumbNavPages %}
@@ -48,8 +47,7 @@
         {{ content | safe }}
 
     {% if tags and tags.includes("posts") %}
-        <nav class="blog__post--pagination">
-            <h2 class="visually-hidden">Next and Previous Blog Posts</h2>
+        <nav class="blog__post--pagination" aria-label="Next and Previous Blog Posts">
             {%- if collections.posts %}
                 {%- set previousPost = collections.posts | getPreviousCollectionItem %}
                 {%- set nextPost = collections.posts | getNextCollectionItem %}
diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index 897897f6..ed28ff49 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -14,7 +14,7 @@ https://kalechips.net/projects/snippets/burger #}
 {%- endif -%}
 {% endset %}
 
-<nav class="navbar">
+<nav class="navbar" aria-label="Top level">
     <details class="navbar__burger">
         <summary class="navbar__toggle" id="toggle">
             <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -22,7 +22,7 @@ https://kalechips.net/projects/snippets/burger #}
             </svg>
             Navigation
         </summary>
-        <nav class="navbar__menu">
+        <nav class="navbar__menu" aria-label="Top level hamburger menu">
             <ul class="navbar__menu--links">
                 {{ navLinksEl | safe }}
                 <li class="skip"><a href="#toggle">Close Menu</a></li>
diff --git a/src/_includes/global/toc.njk b/src/_includes/global/toc.njk
index 4fd76ceb..4b18a76c 100644
--- a/src/_includes/global/toc.njk
+++ b/src/_includes/global/toc.njk
@@ -1,4 +1,4 @@
-<aside class="left-sidebar">
+<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">
diff --git a/src/_includes/main/content-nav.njk b/src/_includes/main/content-nav.njk
index ec9ce326..61bc0011 100644
--- a/src/_includes/main/content-nav.njk
+++ b/src/_includes/main/content-nav.njk
@@ -1,5 +1,5 @@
-<aside class="right-sidebar">
-    <nav class="content__nav sidebar--sticky">
+<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>
         <ul class="content__nav--links">
             {% for archive in collections.archive %}