Improve accessibility of foldable sidebar nav and imgproc (#1028)

* Fixing docsy issue #1022 - accessibility of foldable sidebar nav The foldable sidebar nav is using `max-height` transitions to hide subnavs visually, but this approach does not hide visually hidden content from keyboard and screen reader users. Moving to a simple `display: [block/none]` toggle solves the issue. * Improves accessibility of imgproc To be more semantically aligned and to improve accessibility, I propose using <figure> and <figcaption> for images included in this manner, which creates a programmatic association between the image and the additional text, providing more context for screen readers Co-authored-by: LisaFC <[email protected]>
google · Jun 30, 2022 · 54e4cce · 54e4cce
1 parent 1e58133
commit 54e4cce
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
@@ -153,14 +153,11 @@ nav.foldable-nav {
     }
 
     ul.foldable {
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
+        display: none;
     }
 
     input:checked ~ ul.foldable {
-        max-height: 100000vmax;
-        transition: max-height 1s ease-in-out;
+        display: block;
     }
 
     input[type=checkbox] { display: none; }

diff --git a/layouts/shortcodes/imgproc.html b/layouts/shortcodes/imgproc.html
@@ -11,11 +11,11 @@
 {{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
 {{ end }}
 {{ $image := .Scratch.Get "image" }}
-<div class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: {{ add $image.Width 10 }}px">
+<figure class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: {{ add $image.Width 10 }}px">
 	<img class="card-img-top" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
 	{{ with .Inner }}
-	<div class="card-body px-0 pt-2 pb-0">
+	<figcaption class="card-body px-0 pt-2 pb-0">
 		<p class="card-text">{{ . }}{{ with $image.Params.byline }}<small class="text-muted"><br/>{{ . | html }}</small>{{ end }}</p>
-	</div>
+	</figcaption>
 	{{ end }}
-</div>
+</figure>