From 482ee3d3bbdf5491867d01dca453d3ae2e94aa96 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 27 May 2019 12:31:42 -0700
Subject: [PATCH] fix: improve media upload a11y (#1240)

use ul/li instead of divs here
---
 src/routes/_components/compose/ComposeMedia.html     | 10 +++++++---
 src/routes/_components/compose/ComposeMediaItem.html |  6 ++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/routes/_components/compose/ComposeMedia.html b/src/routes/_components/compose/ComposeMedia.html
index 421c2e17..df163f25 100644
--- a/src/routes/_components/compose/ComposeMedia.html
+++ b/src/routes/_components/compose/ComposeMedia.html
@@ -1,18 +1,22 @@
 {#if media.length}
-  <div class="compose-media-container" style="grid-template-columns: repeat({media.length}, 1fr);">
+  <ul class="compose-media-container"
+      aria-label="Media uploads"
+      style="grid-template-columns: repeat({media.length}, 1fr);"
+  >
     {#each media as mediaItem, index}
       <ComposeMediaItem {realm} {mediaItem} {index} {media} />
     {/each}
-  </div>
+  </ul>
 {/if}
 <style>
   .compose-media-container {
     grid-area: media;
+    list-style: none;
     display: grid;
     grid-column-gap: 5px;
     align-items: center;
     justify-content: center;
-    margin-top: 10px;
+    margin: 10px 0 0 0;
     background: var(--form-bg);
     padding: 5px;
     border-radius: 4px;
diff --git a/src/routes/_components/compose/ComposeMediaItem.html b/src/routes/_components/compose/ComposeMediaItem.html
index 21003806..c674cc73 100644
--- a/src/routes/_components/compose/ComposeMediaItem.html
+++ b/src/routes/_components/compose/ComposeMediaItem.html
@@ -1,4 +1,4 @@
-<div class="compose-media compose-media-realm-{realm}">
+<li class="compose-media compose-media-realm-{realm}">
   <img src={mediaItem.data.preview_url} {alt} />
   <div class="compose-media-delete">
     <button class="compose-media-delete-button"
@@ -18,9 +18,11 @@
       Describe {shortName} for the visually impaired
     </label>
   </div>
-</div>
+</li>
 <style>
   .compose-media {
+    margin: 0;
+    padding: 0;
     height: 200px;
     overflow: hidden;
     flex-direction: column;