Merge pull request #550 from alphagov/add-navigation-to-footer

Add navigation and meta links to footer component

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * You can now use `GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment` to get the current environment, for use in the admin layout components (PR #548)
 * Update GOV.UK Frontend from 1.2.0 to 2.1.0 and manage breaking changes (PR #545)
+* Add navigation and meta links to footer component (PR #550)
 
 
 ## 11.0.0

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

@@ -1,8 +1,50 @@
+<%
+  meta ||= []
+  navigation ||= []
+%>
 <footer class="gem-c-layout-footer govuk-footer" role="contentinfo">
   <div class="govuk-width-container ">
+    <% if navigation.any? %>
+      <div class="govuk-footer__navigation">
+        <% navigation.each do |item| %>
+          <div class="govuk-footer__section">
+            <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
+            <% if item[:items] %>
+              <%
+                list_classes = %w( govuk-footer__list )
+                list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
+              %>
+              <ul class="<%= list_classes.join(' ') %>">
+                <% item[:items].each do |item| %>
+                  <% if item[:href] && item[:text] %>
+                    <li class="govuk-footer__list-item">
+                      <a class="govuk-footer__link" href="<%= item[:href] %>">
+                        <%= item[:text] %>
+                      </a>
+                    </li>
+                  <% end %>
+                <% end %>
+              </ul>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <hr class="govuk-footer__section-break">
+    <% end %>
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
+        <% if meta.any? %>
+          <h2 class="govuk-visually-hidden">Support links</h2>
+          <ul class="govuk-footer__inline-list">
+            <% meta[:items].each do |item| %>
+              <li class="govuk-footer__inline-list-item">
+                <a class="govuk-footer__link" href="<%= item[:href] %>">
+                  <%= item[:text] %>
+                </a>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
         <svg role="presentation" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
           <path
             fill="currentColor"

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

@@ -3,10 +3,124 @@ description: The footer provides copyright, licensing and other information
 part_of_admin_layout: true
 govuk_frontend_components:
   - footer
+accessibility_criteria: |
+  Text and links in the Footer must:
+
+  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  Links in the Footer must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when they have focus
+  - change in appearance when touched (in the touch-down state)
+  - change in appearance when hovered
+  - have visible text
+
+  Images in the Footer must:
+
+  - be presentational when linked to from accompanying text "Open Government Licence (OGL) icon".
+
+  Landmarks and Roles in the Footer should:
+
+  - avoid navigation landmarks or roles
+
+    The footer element alone is sufficient for such cases; while a [nav element](https://www.w3.org/TR/html52/sections.html#the-nav-element) can be used, it is usually unnecessary.
+
+    Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
+    Should be challenged if user research indicates this is an issue.
+
+  - have a role of [`contentinfo`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (<footer>)
+
+    Note: This decision has been made given that most uses of this role tend to be used directly on a `<footer>` element.
+    Assumption made is that is most predictable for users of assistive technologies.
+    The spec indicates that `contentinfo` is useful for "Examples of information included in this region of the page are copyrights and links to privacy statements.", which may indicate that it might be better placed around the 'meta' section of this component.
+    Should be challenged if user research indicates this is an issue.
 examples:
   default:
     data: {}
-accessibility_criteria: |
-  The component must:
 
-  * implement accessible links
+  with_meta:
+    data:
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service
+
+  with_navigation:
+    data:
+      navigation:
+        - title: Services and information
+          columns: 2
+          items:
+            - href: '/browse/benefits'
+              text: Benefits
+            - href: '/browse/births-deaths-marriages'
+              text: Births, deaths, marriages and care
+            - href: '/browse/business'
+              text: Business and self-employed
+            - href: '/browse/childcare-parenting'
+              text: Childcare and parenting
+            - href: '/browse/citizenship'
+              text: Citizenship and living in the UK
+            - href: '/browse/justice'
+              text: Crime, justice and the law
+            - href: '/browse/disabilities'
+              text: Disabled people
+            - href: '/browse/driving'
+              text: Driving and transport
+            - href: '/browse/education'
+              text: Education and learning
+            - href: '/browse/employing-people'
+              text: Employing people
+            - href: '/browse/environment-countryside'
+              text: Environment and countryside
+            - href: '/browse/housing-local-services'
+              text: Housing and local services
+            - href: '/browse/tax'
+              text: Money and tax
+            - href: '/browse/abroad'
+              text: Passports, travel and living abroad
+            - href: '/browse/visas-immigration'
+              text: Visas and immigration
+            - href: '/browse/working'
+              text: Working, jobs and pensions
+        - title: Departments and policy
+          items:
+            - href: '/government/how-government-works'
+              text: How government works
+            - href: '/government/organisations'
+              text: Departments
+            - href: '/world'
+              text: Worldwide
+            - href: '/government/policies'
+              text: Policies
+            - href: '/government/publications'
+              text: Publications
+            - href: '/government/announcements'
+              text: Announcements
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service

spec/components/layout_footer_spec.rb

@@ -10,4 +10,30 @@ def component_name
 
     assert_select ".govuk-footer"
   end
+
+  it "renders the footer with meta links" do
+    render_component(meta: { items: [{ href: "/help", text: "Help" }] })
+
+    assert_select ".govuk-footer__meta .govuk-footer__link[href='/help']", text: "Help"
+  end
+
+  it "renders the footer with navigation" do
+    render_component(
+      navigation: [
+        {
+          title: "Services and information",
+          columns: 2,
+          items: [
+            {
+              href: "/browse/benefits",
+              text: "Benefits"
+            }
+          ]
+        }
+      ]
+    )
+
+    assert_select ".govuk-footer__navigation .govuk-footer__heading", text: "Services and information"
+    assert_select ".govuk-footer__navigation .govuk-footer__list--columns-2 .govuk-footer__link[href='/browse/benefits']", text: "Benefits"
+  end
 end