Merge pull request #100 from gracegrimwood/accessibility-fixes

Accessibility Fixes

Author: SamBarker

_includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="pt-4 pt-md-5 pb-0 mt-md-auto mt-5 bg-body-tertiary">
+<footer class="pt-4 pt-md-5 pb-0 mt-md-auto mt-5 bg-body-tertiary" role="contentinfo" aria-label="Site navigation, contact, and copyright information">
     <div class="container py-3 py-md-5 px-4 px-md-3 text-body-secondary">
         <div class="row krx-footer-links justify-content-between">
             <div class="col-lg-4 mb-3">
@@ -29,14 +29,14 @@
                         </div>
                         <div class="w-100 my-2">
                             <a class="icon-link me-1" href="https://github.com/kroxylicious/kroxylicious">
-                                <img class="img-fluid krx-icon" src="{{ '/assets/theme/images/github-mark.svg' | absolute_url }}"/>
+                                <img class="img-fluid krx-icon" src="{{ '/assets/theme/images/github-mark.svg' | absolute_url }}" alt="GitHub logo"/>
                             </a>
                         </div>
                     </li>
                 </ul>
             </div>
             <div class="col-6 col-lg-2 offset-lg-2 mb-3 text-lg-end">
-                <h5>Links</h5>
+                <h1 class="fs-5">Links</h1>
                 <ul class="list-unstyled">
                     <li class="mb-2">
                         <a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="{{ '/' | absolute_url }}">
@@ -61,7 +61,7 @@ <h5>Links</h5>
                 </ul>
             </div>
             <div class="col-6 col-lg-2 mb-3 text-lg-end">
-                <h5>Projects</h5>
+                <h1 class="fs-5">Projects</h1>
                 <ul class="list-unstyled">
                     <li class="mb-2">
                         <a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="https://github.com/kroxylicious/kroxylicious">
@@ -76,7 +76,7 @@ <h5>Projects</h5>
                 </ul>
             </div>
             <div class="col-6 col-lg-2 mb-3 text-lg-end">
-                <h5>Community</h5>
+                <h1 class="fs-5">Community</h1>
                 <ul class="list-unstyled">
                     <li class="mb-2">
                         <a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="https://kroxylicious.slack.com" target="_blank" rel="noopener">

_includes/nav.html

@@ -8,7 +8,7 @@
     <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <i class="bi bi-three-dots" aria-hidden="true"></i>
     </button>
-    <div class="offcanvas-lg offcanvas-end flex-grow-1" id="navbarContent" aria-labelledby="navbarContentOffcanvasLabel">
+    <div class="offcanvas-lg offcanvas-end flex-grow-1" id="navbarContent">
       <div class="offcanvas-header px-4 pb-0">
         <a class="navbar-brand p-0 me-0 me-lg-2" href="{{ '/' | absolute_url }}" aria-label="Kroxylicious">
           <img src="{{ '/assets/theme/images//kroxylicious_logo_rgb_hori_reverse_bright.svg' | absolute_url }}"

_includes/nested-card-tabbed/tab.html

@@ -2,7 +2,7 @@
     <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"
-            role="tab" aria-controls="{{ include.htmlid }}-tab-pane"
+            aria-controls="{{ include.htmlid }}-tab-pane"
             {% if include.is_active_tab %}aria-current="true"{% endif %}
             aria-selected="{{ include.is_active_tab }}">
         {{ include.tab_title | markdownify }}

_includes/redhat-footer.html

@@ -3,7 +3,7 @@
     <div class="license">
       &copy; Kroxylicious authors {{ 'now' | date: "%Y" }} | Kroxylicious licensed <a href="https://github.com/kroxylicious/kroxylicious/blob/main/LICENSE" target="_blank" rel="license noopener">Apache-2.0</a> | Documentation <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="license noopener">CC-BY-4.0</a> | Apache and Apache Kafka are trademarks of the <a href="https://www.apache.org/" target="_blank" rel="license noopener">Apache Software Foundation</a>.
     </div>
-    <div class="redhat-logo"><a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/theme/images/Logo-Red_Hat-Sponsored_By-A-Reverse-RGB.svg"></a>
+    <div class="redhat-logo"><a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/theme/images/Logo-Red_Hat-Sponsored_By-A-Reverse-RGB.svg" alt="Sponsored By Red Hat logo"></a>
       </div>
     </div>
   </div>

_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">
-                <h3 class="card-title">{{ page.title }}</h3>
+                <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 @@ <h3 class="card-title">{{ page.title }}</h3>
             </div>
         </div>
     </div>
-    <div class="col-lg-6">
+    <div class="col-lg-6" role="main">
         {% if site.paginate %}
             {% assign posts = paginator.posts %}
         {% else %}
@@ -35,13 +35,13 @@ <h3 class="card-title">{{ page.title }}</h3>
                             <div class="col-md align-self-center">
                         {% endif %}
                             <div class="card-body mx-3 my-2">
-                                <h4 class="card-title">
+                                <h2 class="card-title fs-4">
                                     <a class="page-link" href="{{ post.url | absolute_url }}">
                                         {{ post.title | escape }}
                                     </a>
-                                </h4>
+                                </h2>
                                 <p class="card-text">{{ post.excerpt | markdownify }}</p>
-                                <p class="card-text text-end"><small class="text-primary">{{ post.date | date: date_format }}</small></p>
+                                <p class="card-text text-end"><small class="text-secondary">{{ post.date | date: date_format }}</small></p>
                             </div>
                         </div>
                     </div>
@@ -51,7 +51,7 @@ <h4 class="card-title">
     </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,23 +5,23 @@
 <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">
-          <h3 class="card-title">
+      <div class="card-body mx-2" role="navigation" aria-label="{{ page.title }} page navigation">
+          <h1 class="card-title fs-3">
             {{ page.title }}
-          </h3>
+          </h1>
         <div class="card-text g-0">
           <p><em>This documentation is for a stable release version of Kroxylicious. For the documentation from the latest development version of Kroxylicious, <a href="{{ '/kroxylicious' | relative_url }}">click here</a>.</small></em></p>
           {{ page.document | tocify_asciidoc }}
         </div>
       </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">
           <div class="col-auto">
-            <div class="card-text m-2">
+            <div class="card-text ms-3 m-2">
               {% if page.version_warning %}
               {% include bs-alert.html type="warning" content=page.version_warning %}
               {% endif %}
@@ -33,3 +33,16 @@ <h3 class="card-title">
     </div>
   </div>
 </div>
+<!-- The following script fixes an accessibility issue with the sectanchors injected by AsciiDoc not containing any content. -->
+<!-- The script adds a span which the anchor CSS applies to, then moves the header text inside the anchor element. -->
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("a.anchor").forEach((anchorElem) => {
+      var anchorSpan = document.createElement('span');
+      anchorSpan.setAttribute("class", "anchor-icon");
+      anchorElem.appendChild(anchorSpan);
+      anchorElem.appendChild(anchorElem.nextSibling);
+      anchorElem.setAttribute("class", anchorElem.getAttribute("class") + " text-decoration-none text-reset")
+    })
+  })
+</script>

_layouts/index.html

@@ -4,14 +4,14 @@
 
 <!-- Hero -->
 
-<div class="krx-hero">
+<div class="krx-hero" role="complementary" aria-labelledby="krx-hero-title">
     <div class="container col-xxl-8 px-4 py-5">
     <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
       <div class="col-10 col-sm-8 col-lg-6">
         <img src="{{ '/assets/theme/images/kroxylicious_logo_rgb_no_text.svg' | absolute_url}}" class="d-block mx-lg-auto img-fluid" alt="Kroxylicious Mascot" width="700" height="500" loading="lazy">
       </div>
       <div class="col-lg-6">
-        <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious, the snappy open source proxy for Apache Kafka<sup>&#174;</sup></h1>
+        <h1 class="fw-bold text-body-emphasis lh-1 mb-3" id="krx-hero-title">Kroxylicious, the snappy open source proxy for Apache Kafka<sup>&#174;</sup></h1>
         <p class="lead">Topic encryption, policy-enforcement, multi-tenancy, audit and much more.</p>
         <div class="d-grid gap-2 d-md-flex justify-content-md-start">
           <a href="{{site.baseurl}}/overview/" alt="What Kroxylicious is and how does it work?" type="button" class="btn btn-light btn-lg px-4 gap-3">What is it?</a>
@@ -24,7 +24,7 @@ <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious, the snappy open s
 
 <!-- Hero -->
 
-<div class="row justify-content-center">
+<div class="row justify-content-center" role="main">
   <div class="col-11 col-lg-8 gx-5 gy-5 m-lg-5">
     <div class="row g-0">
       <div class="col-auto">

_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,19 +5,34 @@
 
 <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-title display-6 mt-3 mb-4">Use Cases</div>
+        <div class="card-body mx-2" role="main" aria-labelledby="page-title">
+            <div class="card-title display-6 mt-3 mb-4">
+              <h1 id="page-title">Use Cases</h1>
+            </div>
             <div class="row g-0">
                 <div class="col-auto">
-                  {% for use_case in site.use_cases %}
-                    <div class="card-text">{{ use_case.content | toc_only }}</div>
-                  {% endfor %}
-                  {% for use_case in site.use_cases %}
-                    <div class="card-text">{{ use_case.content | markdownify | inject_anchors}}</div>
-                  {% endfor %}
+                  <div class="card-text">
+                    {% for use_case in site.use_cases %}
+                      <div id="{{ use_case.name | slugify }}-toc">{{ use_case.content | toc_only }}</div>
+                    {% endfor %}
+                    {% for use_case in site.use_cases %}
+                      <div id="{{ use_case.name | slugify }}-content">{{ use_case.content | markdownify | inject_anchors}}</div>
+                    {% endfor %}
+                  </div>
                 </div>
             </div>
         </div>
     </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>