From 53395fd54b7050047a94a58a11aa88c4c6b73a3c Mon Sep 17 00:00:00 2001
From: neuroalien <105230050+neuroalien@users.noreply.github.com>
Date: Sun, 13 Aug 2023 04:40:48 +0100
Subject: [PATCH] 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                | 10 ++++++++++
 app/views/home/index.html.erb                   | 12 ++++++------
 config/locales/views/en.yml                     |  8 ++++++++
 public/stylesheets/site/2.0/26-media-narrow.css |  2 +-
 4 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 app/views/home/_fandoms.html.erb

diff --git a/app/views/home/_fandoms.html.erb b/app/views/home/_fandoms.html.erb
new file mode 100644
index 00000000000..f5cd74ef2e7
--- /dev/null
+++ b/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>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 5cd39fbb77c..0bafaa432d0 100644
--- a/app/views/home/index.html.erb
+++ b/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? %>
diff --git a/config/locales/views/en.yml b/config/locales/views/en.yml
index 911a4a53a15..9b0d68cc4c4 100644
--- a/config/locales/views/en.yml
+++ b/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
diff --git a/public/stylesheets/site/2.0/26-media-narrow.css b/public/stylesheets/site/2.0/26-media-narrow.css
index aee2a1722be..0fb07fc582e 100644
--- a/public/stylesheets/site/2.0/26-media-narrow.css
+++ b/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;