Fix usages of aria-labelledby

These now conform to the W3C spec [1], which can be achieved automatically by the correct use of a 'section' element [2]. [1] https://www.w3.org/TR/wai-aria/#region [2] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role
alphagov · Mar 26, 2020 · cda15fc · cda15fc
1 parent a097b81
commit cda15fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/app/views/content_items/_attachments.html.erb b/app/views/content_items/_attachments.html.erb
@@ -1,12 +1,12 @@
 <% attachment_title_id = "#{title.parameterize}-title" %>
 
 <% if legacy_pre_rendered_documents.present? || attachments.any? %>
-  <%= render 'govuk_publishing_components/components/heading',
-      id: attachment_title_id,
-      text: title,
-      mobile_top_margin: true %>
+  <section aria-labelledby="<%= attachment_title_id %>">
+    <%= render 'govuk_publishing_components/components/heading',
+        id: attachment_title_id,
+        text: title,
+        mobile_top_margin: true %>
 
-  <div aria-labelledby="<%= attachment_title_id %>">
     <% if legacy_pre_rendered_documents.present? %>
       <%= render 'govuk_publishing_components/components/govspeak',
                  content: legacy_pre_rendered_documents.html_safe,
@@ -19,5 +19,5 @@
         </div>
       <% end %>
     <% end %>
-  </div>
+  </section>
 <% end %>
diff --git a/app/views/content_items/publication.html.erb b/app/views/content_items/publication.html.erb
@@ -34,16 +34,17 @@
           legacy_pre_rendered_documents: @content_item.documents,
           attachments: @content_item.featured_attachments %>
 
-      <%= render 'govuk_publishing_components/components/heading',
-        text: t("publication.details"),
-        id: "details-title",
-        mobile_top_margin: true %>
 
-      <div aria-labelledby="details-title">
+      <section aria-labelledby="details-title">
+        <%= render 'govuk_publishing_components/components/heading',
+          text: t("publication.details"),
+          id: "details-title",
+          mobile_top_margin: true %>
+
         <%= render 'govuk_publishing_components/components/govspeak',
                    content: @content_item.details.html_safe,
                    direction: page_text_direction %>
-      </div>
+      </section>
     </div>
 
     <%= render 'components/published-dates', {