♿️ Add header and main menu nav landmarks (#3048)

Wrap the page header in a header element and the subnavigation menu in
a labelled nav landmark. Addresses #3023.

Co-authored-by: Chris Herborth <chrish@taffer.ca>

i18n/en.yaml

@@ -60,6 +60,7 @@ list:
   no_articles: "There are no articles to list here yet."
 
 nav:
+  main_menu: "Main menu"
   scroll_to_top_title: "Scroll to top"
   skip_to_main: "Skip to main content"
 

layouts/_default/baseof.html

@@ -19,12 +19,14 @@
         {{ i18n "nav.skip_to_main" }}
       </a>
     </div>
-    {{ $header := print "header/" site.Params.header.layout ".html" }}
+    <header>
-    {{ if templates.Exists ( printf "partials/%s" $header ) }}
+      {{ $header := print "header/" site.Params.header.layout ".html" }}
-      {{ partial $header . }}
+      {{ if templates.Exists ( printf "partials/%s" $header ) }}
-    {{ else }}
+        {{ partial $header . }}
-      {{ partial "header/basic.html" . }}
+      {{ else }}
-    {{ end }}
+        {{ partial "header/basic.html" . }}
+      {{ end }}
+    </header>
     <div class="relative flex flex-col grow">
       <main id="main-content" class="grow">
         {{ block "main" . }}{{ end }}

layouts/partials/header/basic.html

@@ -37,30 +37,32 @@
 </div>
 
 {{ if .Site.Menus.subnavigation }}
-  <div
+  <nav id="main-menu" aria-label="{{ i18n "nav.main_menu" }}">
-    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
+    <div
-      -mt-[15px]
+      class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
-    {{ end }}">
+        -mt-[15px]
-    <div class="hidden md:flex items-center space-x-5">
+      {{ end }}">
-      {{ range .Site.Menus.subnavigation }}
+      <div class="hidden md:flex items-center space-x-5">
-        <a
+        {{ range .Site.Menus.subnavigation }}
-          href="{{ .URL }}"
+          <a
-          {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+            href="{{ .URL }}"
-            target="_blank"
+            {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-          {{ end }}
+              target="_blank"
-          class="flex items-center bf-icon-color-hover">
+            {{ end }}
-          {{ if .Pre }}
+            class="flex items-center bf-icon-color-hover">
-            <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
+            {{ if .Pre }}
-              {{ partial "icon.html" .Pre }}
+              <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
+                {{ partial "icon.html" .Pre }}
+              </span>
+            {{ end }}
+            <span class="text-xs font-light" title="{{ .Title }}">
+              {{ .Name | markdownify }}
             </span>
-          {{ end }}
+          </a>
-          <span class="text-xs font-light" title="{{ .Title }}">
+        {{ end }}
-            {{ .Name | markdownify }}
+      </div>
-          </span>
-        </a>
-      {{ end }}
     </div>
-  </div>
+  </nav>
 {{ end }}
 
 {{ if .Site.Params.highlightCurrentMenuArea }}