Accessibility fixes for generated documentation

anvilco · Jun 12, 2022 · 87a6595 · 87a6595
1 parent 31c9512
commit 87a6595
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/src/themes/default/stylesheets/base.scss b/src/themes/default/stylesheets/base.scss
@@ -39,6 +39,18 @@ $text-color: black !default;
   }
 }
 
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 #spectaql {
   padding: 0;
   margin: 0;
@@ -166,10 +178,16 @@ $text-color: black !default;
         box-shadow: 0 5px 0 $text-color, 0 10px 0 $text-color;
       }
     }
+    .sr-only {
+      @include visually-hidden();
+    }
   }
 
   .close-button {
     display: block;
+    .sr-only {
+      @include visually-hidden();
+    }
 
     @media (min-width: $size-sidebar-break) {
       display: none;

diff --git a/src/themes/default/stylesheets/main.scss b/src/themes/default/stylesheets/main.scss
@@ -231,7 +231,7 @@ $background-arguments: #fafbfc;
     .sidebar-open-button {
       &::after {
         display: block;
-        content: "All Topics";
+        content: "All topics";
         margin-left: math.div($content-padding, 2);
         color: $text-color;
       }
@@ -308,7 +308,7 @@ $background-arguments: #fafbfc;
     margin-top: $content-padding;
 
     .example-heading {
-      display: none;
+      @include visually-hidden();
     }
 
     // The heading above each code example block
@@ -387,7 +387,7 @@ $background-arguments: #fafbfc;
     .operation-description > h5,
     .definition-description > h5,
     .definition-properties > h5 {
-      display: none;
+      @include visually-hidden();
     }
   }
 

diff --git a/src/themes/default/views/partials/layout/nav/mobile-navbar.hbs b/src/themes/default/views/partials/layout/nav/mobile-navbar.hbs
@@ -2,5 +2,6 @@
 <div id="mobile-navbar">
   <button class="sidebar-open-button" type="button">
     <span class="hamburger"></span>
+    <span class="sr-only">All topics</span>
   </button>
 </div>
diff --git a/src/themes/default/views/partials/layout/page.hbs b/src/themes/default/views/partials/layout/page.hbs
@@ -7,8 +7,9 @@
           <img src="images/{{logo}}" title="{{info.title}}" />
         {{/if}}
       </div>
-      <button class="close-button" aria-label="Close menu" type="button">
+      <button class="close-button" type="button">
         <span aria-hidden="true">×</span>
+        <span class="sr-only">Close menu</span>
       </button>
     </div>
     {{>layout/nav/main}}