From 4221ce1c72f8480927ae840acf2e81038ec49626 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 23 Nov 2019 11:25:42 -0800
Subject: [PATCH] fix: media nav buttons should be a list (#1648)

More work on #1633, improves accessibility of the media nav buttons by cleaning up the list and labels a bit.
---
 .../dialog/components/MediaDialog.html        | 72 ++++++++++++-------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html
index d9c9eab7..5a98dea7 100644
--- a/src/routes/_components/dialog/components/MediaDialog.html
+++ b/src/routes/_components/dialog/components/MediaDialog.html
@@ -36,38 +36,46 @@
         />
       {/if}
       {#if dots.length > 1}
-        <div class="media-controls">
-            <IconButton
-              className="media-control-button"
-              svgClassName="media-control-button-svg"
-              disabled={scrolledItem === 0}
-              label="Show previous media"
-              href="#fa-angle-left"
-              on:click="prev()"
-            />
-            {#each dots as dot, i (dot.i)}
-              <!-- TODO: this should probably be aria-current or something, not a toggle button -->
+        <!-- Roughly based on https://www.w3.org/WAI/tutorials/carousels/functionality/
+             Since this toolbar contains a mix of left/right/first/second/third/fourth buttons,
+             just list them and explicitly label the current one as "current." -->
+        <ul class="media-controls" aria-label="Navigate media items">
+            <li class="media-control">
               <IconButton
                 className="media-control-button"
                 svgClassName="media-control-button-svg"
-                pressable={true}
-                label="Show {nth(i)} media"
-                pressedLabel="Showing {nth(i)} media"
-                pressed={i === scrolledItem}
-                href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
-                sameColorWhenPressed={true}
-                on:click="onButtonClick(i)"
+                disabled={scrolledItem === 0}
+                label="Show previous media"
+                href="#fa-angle-left"
+                on:click="prev()"
               />
+            </li>
+            {#each dots as dot, i (dot.i)}
+              <li class="media-control">
+                <IconButton
+                  className="media-control-button"
+                  svgClassName="media-control-button-svg"
+                  pressable={true}
+                  label="Show {nth(i)} media"
+                  pressedLabel="Show {nth(i)} media (current)"
+                  pressed={i === scrolledItem}
+                  href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
+                  sameColorWhenPressed={true}
+                  on:click="onButtonClick(i)"
+                />
+              </li>
             {/each}
-            <IconButton
-              className="media-control-button"
-              svgClassName="media-control-button-svg"
-              disabled={scrolledItem === length - 1}
-              label="Show next media"
-              href="#fa-angle-right"
-              on:click="next()"
-            />
-        </div>
+            <li class="media-control">
+              <IconButton
+                className="media-control-button"
+                svgClassName="media-control-button-svg"
+                disabled={scrolledItem === length - 1}
+                label="Show next media"
+                href="#fa-angle-right"
+                on:click="next()"
+              />
+            </li>
+        </ul>
       {/if}
       {#if canPinchZoom}
         <IconButton
@@ -144,6 +152,16 @@
     display: flex;
     justify-content: space-between;
   }
+  ul.media-controls {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li.media-control {
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
 
   :global(.media-pinch-zoom) {
     width: 100%;