Final (tm) sweep of accessibility tweaks

Aside from the codeblocks (styling of which is not entirely in
our control), this puts us with 0 violations according to the
IBM Accessibility 7.3 guidelines which seem to be quite strict.

Author: meldra

themes/CodeMeta-Pyramids/layouts/_default/landing.html

@@ -5,7 +5,7 @@
   {{ partial "page-header.html" . }}
 
 
-  <div class="main main-raised">
+  <div id="jump-to-content" class="main main-raised">
     <div class="section section-basic">
       <div class="container">
 		<div class="row">

themes/CodeMeta-Pyramids/layouts/_default/list.html

@@ -4,7 +4,7 @@
 
   {{ partial "page-header.html" . }}
 
-  <div class="main main-raised">
+  <div id="jump-to-content" class="main main-raised">
     <div class="section section-basic">
       <div class="container">
 

themes/CodeMeta-Pyramids/layouts/_default/sidenav.html

@@ -5,7 +5,7 @@
   {{ partial "page-header.html" . }}
 
 
-  <div class="main main-raised">
+  <div id="jump-to-content" class="main main-raised">
     <div class="section section-basic">
       <div class="container">
 

themes/CodeMeta-Pyramids/layouts/_default/single.html

@@ -5,7 +5,7 @@
   {{ partial "page-header.html" . }}
 
 
-  <div class="main main-raised">
+  <div id="jump-to-content" class="main main-raised">
     <div class="section section-basic">
       <div class="container">
 

themes/CodeMeta-Pyramids/layouts/partials/footer.html

@@ -1,6 +1,7 @@
+</main>
 <footer class="footer">
   <div class="container">
-	  <nav class="pull-left">
+	  <nav id="footer-nav" class="pull-left" aria-label="Footer navigation">
 	    <ul>
 	    {{ range .Site.Menus.footer }}
         {{ if .HasChildren }}

themes/CodeMeta-Pyramids/layouts/partials/nav.html

@@ -1,8 +1,9 @@
-<nav class="navbar navbar-transparent fixed-top navbar-expand-lg" id="sectionsNav">
+<nav class="navbar navbar-transparent fixed-top navbar-expand-lg" id="sectionsNav" aria-label="Main navigation">
     <div class="container">
       <div class="navbar-translate">
         <a class="navbar-brand" href=" {{ .Site.BaseURL | relURL }}">
           {{.Site.Title }} </a>
+        <a class="p-1" id="skip-to-content" href="#jump-to-content" aria-label="Skip to content"><i role="presentation" class="bi bi-arrow-down-circle p-1"></i>Skip to content</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
           <span class="sr-only">Toggle navigation</span>
           <span class="navbar-toggler-icon"></span>
@@ -22,8 +23,8 @@
           {{ end }}
           <li>
 			<div class="form-check dark-light-toggler">
-				<input class="form-check-input" type="checkbox" id="darkModeSwitch" aria-label="Switch between light and dark mode">
-				<label class="form-check-label" for="darkModeSwitch">
+				<input class="form-check-input" type="checkbox" id="darkModeSwitch" role="switch" aria-label="Switch between light and dark mode">
+				<label class="form-check-label" for="darkModeSwitch" role="placeholder" aria-label="Select to change mode" aria-hidden="true">
 					<i role="presentation" class='bi bi-sun-fill d-none' id='light-mode-bi' title="Light mode"></i>
 					<i role="presentation" class='bi bi-moon-stars-fill' id='dark-mode-bi' title="Dark mode"></i>
 				</label>

themes/CodeMeta-Pyramids/layouts/partials/page-header.html

@@ -1,11 +1,12 @@
+<main>
 <div class="page-header header-filter clear-filter blue-filter" 
        style="background-image: url('{{ .Site.Params.background | absURL }}');">
     <div class="container">
       <div class="row">
         <div class="col-md-8 ml-auto mr-auto">
           <div class="brand">
             <h1>{{ .Title }}</h1>
-            <h3>{{ .Params.subtitle }}</h3>
+
           </div>
         </div>
       </div>

themes/CodeMeta-Pyramids/static/css/codemeta.css

@@ -75,7 +75,7 @@ div.highlight {
 }
 
 .highlight {
-  background-color: var(--bs-secondary-bg);
+  background-color: var(--bs-tertiary-bg);
 }
 
 [data-bs-theme=dark] div.highlight {
@@ -139,11 +139,11 @@ h1,h2,h3,h4,h5,h6,h7 {
     }
 
 	.toc-level {
-	  border-right: 5px solid var(--bs-secondary-bg);
+	  border-right: 5px solid var(--bs-body-bg);
 	}
 
 	.toc-level:hover {
-	  background-color: var(--bs-dark-bg-subtle);
+	  background-color: var(--bs-secondary-bg);
 	  border-right: 5px solid var(--bs-dark-border-subtle);
 	}
 
@@ -208,6 +208,11 @@ h1,h2,h3,h4,h5,h6,h7 {
  * Accessibility tweaks
  */
 
+:focus-visible, .dark-light-toggler:focus-within {
+  outline: 2px dashed var(--bs-info) !important;
+  border-radius: 2px;
+}
+
 .main a {
   color: var(--bs-primary);
   text-decoration: underline !important;
@@ -225,3 +230,18 @@ h1,h2,h3,h4,h5,h6,h7 {
 code{
   color: var(--bs-code-color);
 }
+
+#skip-to-content{
+  color: var(--bs-body-color);
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  padding-right: 5px;
+  transform: translateY(-100%);
+  background: var(--bs-secondary-bg-subtle);
+  border-radius: 0 0 0 1em;
+}
+
+#skip-to-content:focus{
+	transform: translateY(0%);
+}