fix accessibility issues with docs section anchors not having any content

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

Author: gracegrimwood

_layouts/docs.html

@@ -21,7 +21,7 @@ <h3 class="card-title">
       <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>

_sass/kroxylicious.scss

@@ -155,7 +155,7 @@ div.highlighter-rouge {
 
 // Anchor Links
 
-h2>a.anchor, h3>a.anchor, h4>a.anchor, h5>a.anchor, h6>a.anchor {
+h2>a.anchor>span, h3>a.anchor>span, h4>a.anchor>span, h5>a.anchor>span, h6>a.anchor>span {
   font-family: bootstrap-icons!important;
   color: rgba($primary, 0);
   display: block;
@@ -169,15 +169,15 @@ h2>a.anchor, h3>a.anchor, h4>a.anchor, h5>a.anchor, h6>a.anchor {
           color 200ms ease-in-out;
 }
 
-h2>a.anchor::before, h3>a.anchor::before, h4>a.anchor::before, h5>a.anchor::before, h6>a.anchor::before {
+h2>a.anchor>span::before, h3>a.anchor>span::before, h4>a.anchor>span::before, h5>a.anchor>span::before, h6>a.anchor>span::before {
   content: "\f470";
 }
 
-h2:hover>a.anchor, h3:hover>a.anchor, h4:hover>a.anchor, h5:hover>a.anchor, h6:hover>a.anchor {
+h2:hover>a.anchor>span, h3:hover>a.anchor>span, h4:hover>a.anchor>span, h5:hover>a.anchor>span, h6:hover>a.anchor>span {
   visibility: visible;
   color: rgba($primary, 1);
 }
 
-h2:hover>a.anchor:hover, h3:hover>a.anchor:hover, h4:hover>a.anchor:hover, h5:hover>a.anchor:hover, h6:hover>a.anchor:hover {
+h2:hover>a.anchor>span:hover, h3:hover>a.anchor>span:hover, h4:hover>a.anchor>span:hover, h5:hover>a.anchor>span:hover, h6:hover>a.anchor>span:hover {
   color: rgba($secondary, 1);
 }