Merge pull request #516 from communitiesuk/a11y-document-list

Improved semantics for document list

app/components/document_list_component.html.erb

@@ -1,15 +1,15 @@
-<ul class="app-document-list">
+<dl class="app-document-list">
   <% items.each do |item| %>
-    <li class="app-document-list__item">
+    <div class="app-document-list__item">
-      <h3 class="app-document-list__item-title">
+      <dt class="app-document-list__item-title">
         <%= govuk_link_to item[:name], item[:href] %>
-      </h3>
+      </dt>
       <% if item[:description] %>
-        <p class="app-document-list__item-description"><%= item[:description] %></p>
+        <dd class="app-document-list__item-description"><%= item[:description] %></dd>
       <% end %>
       <% if item[:metadata] %>
-        <p class="app-document-list__item-metadata"><%= item[:metadata] %></p>
+        <dd class="app-document-list__item-metadata"><%= item[:metadata] %></dd>
       <% end %>
-    </li>
+    </div>
   <% end %>
-</ul>
+</dl>

app/frontend/styles/_card.scss

@@ -4,4 +4,8 @@
   background-color: govuk-colour("light-grey");
   display: block;
   position: relative;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }

app/frontend/styles/_document-list.scss

@@ -1,15 +1,8 @@
-.app-document-list {
-  list-style: none;
-  padding: 0;
-}
-
 .app-document-list__item {
   margin-bottom: govuk-spacing(4);
 
   &:last-child {
-    border-bottom: 0;
     margin-bottom: 0;
-    padding-bottom: 0;
   }
 }