Explain the map’s symbols with a legend

Display a map legend for sighted users. Within the legend, render the available seat icon states: selected and unselected (referencing xlink:href="#seat-icon-selected" and xlink:href="#seat-icon-unselected", respectively).

To avoid confusing users navigating the page with assistive technology, mark the legend with aria-hidden=“true”.

Desktop

seat map legend


      app/views/seats/index.html.erb

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 4c72c60..6156a09 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -9,6 +9,52 @@
     class="syos-frame"
   >
     <div class="syos-frame__map">
+      <div class="syos-frame__legend" aria-hidden="true">
+        <p class="syos-u-margin-bottom-3 syos-u-font-weight-bold">
+        Legend
+        </p>
+
+        <ul class="syos-block-stack">
+          <li class="syos-block-stack__item">
+            <svg
+              width="16px"
+              height="16px"
+              viewbox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <use
+                width="16px"
+                height="16px"
+                xlink:href="#seat-icon-unselected"
+              >
+              </use>
+            </svg>
+
+              Available
+          </li>
+
+          <li class="syos-block-stack__item">
+            <svg
+              width="16px"
+              height="16px"
+              viewbox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <use
+                width="16px"
+                height="16px"
+                xlink:href="#seat-icon-selected"
+              >
+              </use>
+            </svg>
+
+              Selected
+          </li>
+        </ul>
+      </div>
+
       <svg
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"