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

Author: awilfox

app/assets/stylesheets/includes/desktop.scss

@@ -104,7 +104,7 @@
     }
   }
 
-  section {
+  article {
     &.record {
       h1 {
         line-height: $line-height;

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) {

app/assets/stylesheets/includes/mobile.scss

@@ -141,7 +141,7 @@
     }
   }
 
-  section {
+  article {
     &.record {
       h1 {
         line-height: $line-height-xsmall;

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 }) %>