AO3-6553 Better semantics and a11y for the media list on the homepage (…

…#4581)

AO3-6553 Turn homepage media list into navigation

Semantically, the list of media (plus All Fandoms) on the homepage is a
navigation element, not a menu.

The list of media used in the main site menu needs to stay a `menu`, so
we're unDRYing the partial and creating a new partial just for use on
the homepage.

The preferred element to use in modern web development is `nav`. We
don't use this anywhere else (yet), so this will be our test case.

(Per https://www.w3.org/TR/html-aria/#docconformance, `ul`s are not
allowed to have the role `navigation`.)

app/views/home/_fandoms.html.erb

@@ -0,0 +1,10 @@
+<ul>
+  <li><%= link_to t(".all_fandoms"), media_path %></li>
+  <% cache "homepage-fandoms-version1", skip_digest: true do %>
+    <% Media.for_menu.each do |medium| %>
+      <% unless medium.id.nil? %>
+        <li><%= link_to ts("#{medium.name}"), medium_fandoms_path(medium) %></li>
+      <% end %>
+    <% end %>
+  <% end %>
+</ul>

app/views/home/index.html.erb

@@ -5,7 +5,7 @@
 
   <% if logged_in? && @homepage.favorite_tags.present? %>
     <div class="favorite module">
-      <h3 class="heading"><%= ts('Find your favorites') %></h3>
+      <h3 class="heading"><%= t(".find_your_favorites") %></h3>
       <ul>
         <% @homepage.favorite_tags.each do |favorite_tag| %>
           <li>
@@ -15,13 +15,13 @@
       </ul>
     </div>
   <% else %>
-    <div class="browse module">
-      <h3 class="heading"><%= ts('Find your favorites') %></h3>
+    <nav aria-label="<%= t(".media_navigation_label") %>" class="browse module">
+      <h3 class="heading"><%= t(".find_your_favorites") %></h3>
       <% if logged_in? %>
-        <p class="note"><%= ts('Browse fandoms by media or favorite up to %{maximum} tags to have them listed here!', maximum: ArchiveConfig.MAX_FAVORITE_TAGS) %></p>
+        <p class="note"><%= t(".browse_or_favorite", count: ArchiveConfig.MAX_FAVORITE_TAGS) %></p>
       <% end %>
-      <%= render 'menu/menu_fandoms' %>
-    </div>
+      <%= render 'fandoms' %>
+    </nav>
   <% end %>
 
   <% if @homepage.admin_posts.present? %>

config/locales/views/en.yml

@@ -429,6 +429,14 @@ en:
   home:
     donate:
       page_title: Donate or Volunteer
+    fandoms:
+      all_fandoms: All Fandoms
+    index:
+      browse_or_favorite:
+        one: Browse fandoms by media or favorite up to %{count} tag to have it listed here!
+        other: Browse fandoms by media or favorite up to %{count} tags to have them listed here!
+      find_your_favorites: Find your favorites
+      media_navigation_label: Media
   invitations:
     invitation:
       email_address_label: Enter an email address

public/stylesheets/site/2.0/26-media-narrow.css

@@ -182,7 +182,7 @@ body .narrow-shown {
   padding: 0;
 }
 
-.splash div.module, .logged-in .splash div.module {
+.splash div.module, .splash nav.module, .logged-in .splash div.module, .logged-in .splash nav.module {
   clear: both;
   margin-left: 0;
   margin-right: 0;