From 6ccaee3c6df50197b7d9882ae1a94583869536fc Mon Sep 17 00:00:00 2001
From: "A. Wilcox" <AWilcox@Wilcox-Tech.com>
Date: Tue, 13 Jan 2026 22:12:09 -0600
Subject: [PATCH] record: Rework HTML markup for records

* Use `<ARTICLE/>` for the overall record container; each track remains
  its own `<SECTION/>` which makes more semantic sense.

* Use `<ASIDE/>` instead of `<UL/>` for track information.  This is the
  intent for this tag (ancillary information about the section it appears
  inside or next to), and fixes the accessibility issue of improperly
  using a list for markup of something that is not a list.

Closes: ADA-670
---
 app/assets/stylesheets/includes/desktop.scss |  2 +-
 app/assets/stylesheets/includes/main.scss    |  7 ++++---
 app/assets/stylesheets/includes/mobile.scss  |  2 +-
 app/views/player/_record.html.erb            | 12 ++++++------
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/includes/desktop.scss b/app/assets/stylesheets/includes/desktop.scss
index 339d5bd..d5659f1 100644
--- a/app/assets/stylesheets/includes/desktop.scss
+++ b/app/assets/stylesheets/includes/desktop.scss
@@ -104,7 +104,7 @@
     }
   }
 
-  section {
+  article {
     &.record {
       h1 {
         line-height: $line-height;
diff --git a/app/assets/stylesheets/includes/main.scss b/app/assets/stylesheets/includes/main.scss
index 1d8cf94..920e71e 100644
--- a/app/assets/stylesheets/includes/main.scss
+++ b/app/assets/stylesheets/includes/main.scss
@@ -169,7 +169,9 @@ section {
     margin-bottom: $margin;
     width: 100%;
   }
+}
 
+article {
   &.record {
     align-items: center;
     display: flex;
@@ -225,7 +227,7 @@ section {
       }
     }
 
-    ul {
+    aside {
       &.track-info {
         display: flex;
         flex-direction: row;
@@ -234,8 +236,7 @@ section {
         list-style-type: none;
         margin-bottom: $margin-small;
 
-        li {
-          display: block;
+        div {
           padding-left: $margin-small;
 
           &:not(:last-of-type) {
diff --git a/app/assets/stylesheets/includes/mobile.scss b/app/assets/stylesheets/includes/mobile.scss
index 894e78d..51912b1 100644
--- a/app/assets/stylesheets/includes/mobile.scss
+++ b/app/assets/stylesheets/includes/mobile.scss
@@ -141,7 +141,7 @@
     }
   }
 
-  section {
+  article {
     &.record {
       h1 {
         line-height: $line-height-xsmall;
diff --git a/app/views/player/_record.html.erb b/app/views/player/_record.html.erb
index a07ebb3..3ccb5b7 100644
--- a/app/views/player/_record.html.erb
+++ b/app/views/player/_record.html.erb
@@ -2,7 +2,7 @@
 
 <%= render(partial: 'player_head_additional') %>
 
-<section class="record">
+<article class="record">
 
   <h1><%= record.title %></h1>
 
@@ -23,14 +23,14 @@
         %>
         <%= render(partial: track.player_partial, locals: locals) %>
         <% if track.duration || !track.title.blank? %>
-          <ul class="track-info">
+          <aside class="track-info">
             <% unless track.title.blank? %>
-              <li><%= track.title %></li>
+              <div><%= track.title %></div>
             <% end %>
             <% if track.duration %>
-              <li><%= track.duration %></li>
+              <div><%= track.duration %></div>
             <% end %>
-          </ul>
+          </aside>
         <% end %>
       </section>
     <% end %>
@@ -90,7 +90,7 @@
     </tbody>
   </table>
 
-</section>
+</article>
 
 <!--
 <%= render(partial: 'debug', formats: :text, locals: { record: record }) %>