Fix validation errors (#25)

* Fix HTML validation errors

* Fix a11y validation errors

assets/app.css

@@ -4,6 +4,10 @@
     --box-padding: 12px;
 }
 
+#leaflet {
+    aspect-ratio: 1;
+}
+
 html {
     color: var(--color);
     background-color: var(--bgcolor);

lib/mse25_web/components/layouts/app.html.heex

@@ -1,6 +1,6 @@
 <a href="#content" class="skiplink">Hoppa till innehållet</a>
 
-<nav role="menu">
+<nav>
   <div>
     <span class="sr-only">Du är här:</span>
     <span class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
@@ -22,11 +22,11 @@
     </span>
   </div>
 </nav>
-<main id="content" role="main">
+<main id="content">
   <%= @inner_content %>
 </main>
 <%= if show_footer?(assigns) do %>
-  <footer role="contentinfo">
+  <footer>
     <p vocab="https://schema.org/" typeof="Person">
       <a href="https://madr.se" property="url">madr.se</a>
       är <span property="name">Anders Englöf Ytterström</span>s hemsida. Anders är <span property="jobTitle">webbutvecklare</span>, linuxentusiast, ljudtekniker och hårdrockare, bosatt i <span

lib/mse25_web/controllers/item_html/annual.html.heex

@@ -75,12 +75,13 @@
       <%= if t == :albums do %>
         <article class="album" vocab="https://schema.org/" typeof="MusicAlbum">
           <h3>
-            <span property="byArtist"><%= @artist %></span>
-            - <%= csl(@songs) %>, från <span property="name"><%= @album %></span>
-            (<span property="copyrightYear"><%= @year %></span>)
+            <span property="byArtist"><%= item["artist"] %></span>
+            - <%= Enum.map(item["songs"], fn %{"title" => name} -> name end) |> csl() %>,
+            från <span property="name"><%= item["album"] %></span>
+            (<span property="copyrightYear"><%= item["year"] %></span>)
             <a
               class="permalink"
-              href={"/" <> to_string(@year) <> "/brutal-legend-" <> item["externalId"]}
+              href={"/" <> to_string(item["year"]) <> "/brutal-legend-" <> item["externalId"]}
             >
               #
             </a>

lib/mse25_web/controllers/page_html/events.html.heex

@@ -4,7 +4,7 @@
 <section id="map">
   <h2>Geografisk utspridning</h2>
   <figure>
-    <div id="leaflet" style="aspect-ratio: 1"></div>
+    <div id="leaflet"></div>
   </figure>
 </section>
 <p>

lib/mse25_web/controllers/page_html/home.html.heex

@@ -1,72 +1,73 @@
 <main class="landing">
   <img src={~p"/images/aey.svg"} width="120" alt="Anders Englöf Ytterström" />
-  <form metod="get" action="/sok">
+  <h1 class="sr-only">Anders Englöf Ytterström</h1>
+  <form method="get" action="/sok">
     <label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
     <button>Sök</button>
   </form>
-  <div class="tree">
-    <article class="article">
+  <ul class="tree">
+    <li class="article">
       Senast skrivet (<time><%= @recent_article["pubDate"] %></time>):<br />
       <a href={"/" <> @recent_article["slug"]}>
         <%= @recent_article["title"] %>
       </a>
-    </article>
-    <article class="article">
+    </li>
+    <li class="article">
       Dessförinnan (<time><%= @older_article["pubDate"] %></time>):<br />
       <a href={"/" <> @older_article["slug"]}>
         <%= @older_article["title"] %>
       </a>
-    </article>
-    <article class="page">
+    </li>
+    <li class="page">
       <a href="/webblogg">Webbloggen</a>
-    </article>
+    </li>
     <%= for event <- @upcoming do %>
-      <article class="event">
+      <li class="event">
         Kommande: <a href={event["slug"]}><%= event["title"] %><br /><%= event["lead"] %></a>
-      </article>
+      </li>
     <% end %>
     <%= for event <- @recent_event do %>
-      <article class="event">
+      <li class="event">
         Upplevt: <a href={event["slug"]}><%= event["title"] %><br /><%= event["lead"] %></a>
-      </article>
+      </li>
     <% end %>
-    <article class="feed events page">
+    <li class="feed events page">
       <a href="/evenemang">Evenemangstidslinje</a>
-    </article>
-    <article class="feed ics">
+    </li>
+    <li class="feed ics">
       <a href="/kommande-evenemang.ics">Kommande evenemang</a> (vcalendar)
-    </article>
-    <article class="feed links">
+    </li>
+    <li class="feed links">
       <a href="/delningar">
         Delningar
       </a>
-    </article>
+    </li>
     <%= for legend <- @brutal_legends do %>
-      <article class="album">
+      <li class="album">
         Införskaffat (<%= legend["purchased_at"] %>):<br />
         <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
           <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
         </a>
-      </article>
+      </li>
     <% end %>
-    <article class="page">
+    <li class="page">
       <a href="/vad-jag-gor">
         Vad jag gör
       </a>
-    </article>
-    <article class="page">
+    </li>
+    <li class="page">
       Mer om:
       <a href="/om">
         Anders, 39, Hårdrockare
       </a>
-    </article>
-    <article class="feed rss">
+    </li>
+    <li class="feed rss">
       <a href="/prenumerera.xml">Prenumerera</a> (RSS 2.0)
-    </article>
-    <article class="page meta">
+    </li>
+    <li class="page meta">
       <a href="/colophon">
         Kontakt &amp; Kolofon
       </a>
-    </article>
-  </div>
+    </li>
+  </ul>
 </main>