Merge pull request #3907 from alphagov/contents-list-accessibility-fix

Fix accessibility issue in contents list component

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Fix accessibility issue in contents list component ([PR #3907](https://github.com/alphagov/govuk_publishing_components/pull/3907))
+
 ## 37.6.0
 
 * Add single cookie consent API ([PR #3854](https://github.com/alphagov/govuk_publishing_components/pull/3854))

app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -50,7 +50,7 @@
   padding-left: $contents-spacing;
   padding-right: $contents-spacing;
 
-  &::before {
+  & span::before {
     content: "—";
     position: absolute;
     left: 0;

app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -41,6 +41,7 @@
       <% index_link = 1 unless disable_ga4 %>
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
+          <span aria-hidden="true"></span>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
             unless disable_ga4
               ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href]
@@ -64,6 +65,7 @@
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
+                  <span aria-hidden="true"></span>
                   <%
                     unless disable_ga4
                       ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]

app/views/govuk_publishing_components/components/docs/contents_list.yml

@@ -18,6 +18,7 @@ accessibility_criteria: |
   - convey the content structure
   - indicate the current page when contents span different pages, and not link to itself
   - include an aria-label to contextualise the list
+  - ensure dashes before each list item are hidden from screen readers
 
   Links with formatted numbers must separate the number and text with a space for correct screen reader pronunciation. This changes pronunciation from "1 dot Item" to "1 Item".
 shared_accessibility_criteria:

spec/components/contents_list_spec.rb

@@ -48,6 +48,11 @@ def assert_tracking_link(name, value, total = 1)
     assert_select ".gem-c-contents-list__link.govuk-link--no-underline[href='#two']", text: "2. Two"
   end
 
+  it "renders with dashes hidden from screen readers" do
+    render_component(contents: contents_list)
+    assert_select ".gem-c-contents-list__list-item.gem-c-contents-list__list-item--dashed span[aria-hidden='true']"
+  end
+
   it "renders with the underline option" do
     render_component(contents: contents_list, underline_links: true)
     assert_select ".gem-c-contents-list"