last fixes for jekyll-generated content

Signed-off-by: Grace Grimwood <[email protected]>

Author: gracegrimwood

_includes/nested-card-tabbed/tab.html

@@ -1,4 +1,4 @@
-<li class="nav-item" role="tab">
+<li class="nav-item">
     <button class="nav-link krx-card-nav-link {% if include.is_active_tab %}active{% endif %}"
             id="{{ include.htmlid }}" data-bs-toggle="tab"
             data-bs-target="#{{ include.htmlid }}-tab-pane" type="button"

_layouts/blog.html

@@ -2,10 +2,10 @@
 layout: default
 ---
 <div class="row align-items-start justify-content-center my-5">
-    <div class="col-lg-3 mb-5">
+    <div class="col-lg-3 mb-5" role="complementary" aria-labelledby="page-title">
         <div class="card px-2 mx-2">
             <div class="card-body">
-                <h1 class="fs-3" class="card-title">{{ page.title }}</h1>
+                <h1 class="fs-3" class="card-title" id="page-title">{{ page.title }}</h1>
                 <div class="container g-0 mt-4">
                     <p class="card-text">
                         {{ content }}
@@ -14,7 +14,7 @@ <h1 class="fs-3" class="card-title">{{ page.title }}</h1>
             </div>
         </div>
     </div>
-    <div class="col-lg-6">
+    <div class="col-lg-6" role="main">
         {% if site.paginate %}
             {% assign posts = paginator.posts %}
         {% else %}
@@ -51,7 +51,7 @@ <h2 class="card-title fs-4">
     </div>
 </div>
 {% if site.paginate %}
-    <nav aria-label="Blog post list navigation">
+    <nav role="navigation" aria-label="Blog post list navigation">
         <ul class="pagination">
             {%- if paginator.previous_page %}
                 <li class="page-item">

_layouts/docs.html

@@ -5,7 +5,7 @@
 <div class="row justify-content-center gx-0">
   <div class="col-lg-3">
     <div class="card shadow my-lg-5 ms-lg-5 me-1">
-      <div class="card-body mx-2">
+      <div class="card-body mx-2" role="navigation" aria-label="{{ page.title }} page navigation">
           <h1 class="card-title fs-3">
             {{ page.title }}
           </h1>
@@ -16,7 +16,7 @@ <h1 class="card-title fs-3">
       </div>
     </div>
   </div>
-  <div class="col-lg-9">
+  <div class="col-lg-9" role="main">
     <div class="card shadow my-lg-5 me-lg-5 ms-1">
       <div class="card-body mx-2">
         <div class="row g-0">

_layouts/overview.html

@@ -7,11 +7,19 @@
     <div class="row g-0">
       <div class="col-auto">
         <div class="card-body">
-          <div class="card-text m-2">
+          <div class="card-text m-2" role="main" aria-label="Overview of Kroxylicious">
             {{ content | markdownify | inject_anchors }}
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("a.anchor").forEach((anchorElem) => {
+      anchorElem.setAttribute("style", "display: none; visibility: hidden;");
+    })
+  })
+</script>

_layouts/quickstart.html

@@ -1,14 +1,14 @@
 ---
 layout: default
 ---
-<div class="card gx-5 gy-5 m-lg-5">
+<div class="card gx-5 gy-5 m-lg-5" role="navigation" aria-label="Quickstart navigation">
     <div class="card-header">
         <div class="card-title display-6 mx-2 mt-3 mb-4"><i class="bi bi-stopwatch me-4"></i>Quick Start Guide</div>
         <ul class="nav nav-tabs nav-justified fs-5 card-header-tabs" id="quickstart" role="tablist">
             {% for quickstart in site.quickstarts %}
                 {% if quickstart.htmlid and quickstart.tab_title %}
                     <li class="nav-item">
-                        <button class="nav-link {% if forloop.first %}active{% endif %}"
+                        <button class="nav-link krx-card-nav-link {% if forloop.first %}active{% endif %}"
                                 id="{{ quickstart.htmlid }}" data-bs-toggle="tab"
                                 data-bs-target="#{{ quickstart.htmlid }}-tab-pane" type="button"
                                 role="tab" aria-controls="{{ quickstart.htmlid }}-tab-pane"
@@ -20,7 +20,7 @@
             {% endfor %}
         </ul>
     </div>
-    <div class="card-body tab-content p-4 p-lg-5" id="quickstartContent">
+    <div class="card-body tab-content p-4 p-lg-5" id="quickstartContent" role="main" aria-labelledby="{{ quickstart.htmlid }}">
         {% for quickstart in site.quickstarts %}
             {% if quickstart.htmlid and quickstart.tab_title %}
                 <div class="tab-pane fade show {% if forloop.first %}active{% endif %}"

_layouts/use-cases.html

@@ -5,18 +5,18 @@
 
 <div class="row justify-content-center">
     <div class="col-11 col-lg-8 card shadow gx-5 gy-5 m-lg-5">
-        <div class="card-body mx-2">
+        <div class="card-body mx-2" role="main" aria-labelledby="page-title">
             <div class="card-title display-6 mt-3 mb-4">
-              <h1>Use Cases</h1>
+              <h1 id="page-title">Use Cases</h1>
             </div>
             <div class="row g-0">
                 <div class="col-auto">
                   <div class="card-text">
                     {% for use_case in site.use_cases %}
-                      <div class="{{ use_case.name | slugify }}-toc">{{ use_case.content | toc_only }}</div>
+                      <div id="{{ use_case.name | slugify }}-toc">{{ use_case.content | toc_only }}</div>
                     {% endfor %}
                     {% for use_case in site.use_cases %}
-                      <div class="{{ use_case.name | slugify }}-content">{{ use_case.content | markdownify | inject_anchors}}</div>
+                      <div id="{{ use_case.name | slugify }}-content">{{ use_case.content | markdownify | inject_anchors}}</div>
                     {% endfor %}
                   </div>
                 </div>
@@ -25,3 +25,14 @@ <h1>Use Cases</h1>
     </div>
 </div>
 
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("#toc").forEach((tocElem) => {
+      var parentID = tocElem.parentElement.getAttribute("id");
+      tocElem.setAttribute("id", parentID + "-container");
+    })
+    document.querySelectorAll("a.anchor").forEach((anchorElem) => {
+      anchorElem.setAttribute("style", "display: none; visibility: hidden;");
+    })
+  })
+</script>

_sass/kroxylicious.scss

@@ -69,6 +69,10 @@ a {
   text-shadow: 0 0 1rem rgba($kroxy-light, 0.15);
 }
 
+.krx-card-nav-link {
+  color: $kroxy-dark-green;
+}
+
 .krx-footer-license {
   justify-content: flex-end!important;
   margin-top: 1rem !important;