From 54e4ccedbc1386ac8399edc9e31a3dae4c9d148e Mon Sep 17 00:00:00 2001
From: Jason Day <movemaine@gmail.com>
Date: Thu, 30 Jun 2022 18:12:59 -0400
Subject: [PATCH] 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 <lcarey@google.com>
---
 assets/scss/_nav.scss           | 7 ++-----
 layouts/shortcodes/imgproc.html | 8 ++++----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 8b5d4797cc..1d5d41d94a 100644
--- 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
index bb80a8502b..550dc7a4fa 100644
--- 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>
\ No newline at end of file
+</figure>