Allow context in titles to be a link

app/assets/stylesheets/govuk-component/_title.scss

@@ -23,6 +23,24 @@
   color: $secondary-text-colour;
 }
 
+.pub-c-title__context-link {
+  text-decoration: none;
+
+  &:link,
+  &:visited {
+    color: inherit;
+
+    &:focus {
+      color: $black;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
 .pub-c-title__text {
   @include bold-48;
 }

app/views/govuk_component/docs/title.yml

@@ -14,6 +14,8 @@ accessibility_criteria: |
   - be part of a correct heading structure for a page
   - be semantically represented as a heading
   - convey the heading level
+shared_accessibility_criteria:
+  - link
 examples:
   default:
     data:
@@ -22,6 +24,18 @@ examples:
     data:
       context: Publication
       title: My page title
+  with_context_link:
+    description: |
+      It’s unclear if links in the context of a title are useful and are being clicked by users. Data attributes are included to track this behaviour.
+
+      Context links are used on [topic pages](https://www.gov.uk/topic/business-tax/vat) where there is also a breadcrumb.
+    data:
+      context:
+        text: Publication
+        href: '/link'
+        data:
+          some_tracking_parameter: 'tracking-param'
+      title: My page title
   long_title_with_context:
     data:
       context: Publication
@@ -36,3 +50,14 @@ examples:
       margin_bottom: 0
     context:
       dark_background: true
+  in_html_publication_with_context_link:
+    description: Page titles are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
+    data:
+      context:
+        text: Publication
+        href: '/link'
+      title: HTML publication page title
+      inverse: true
+      margin_bottom: 0
+    context:
+      dark_background: true

app/views/govuk_component/title.raw.html.erb

@@ -1,6 +1,10 @@
 <%
   average_title_length ||= false
   context ||= false
+  context_text = context.is_a?(Hash) ? context[:text] : context
+  context_href = context.is_a?(Hash) ? context[:href] : false
+  context_data = context.is_a?(Hash) ? context[:data] : false
+
   inverse ||= false
   margin_bottom ||= 1
   margin_bottom_class = "pub-c-title--bottom-margin" if margin_bottom == 1
@@ -9,7 +13,9 @@
   <% if inverse %>pub-c-title--inverse<% end %>
   <%= margin_bottom_class %>">
   <% if context %>
-    <p class="pub-c-title__context"><%= context %></p>
+    <p class="pub-c-title__context">
+      <%= context_href ? link_to(context_text, context_href, class: 'pub-c-title__context-link', data: context_data) : context_text %>
+    </p>
   <% end %>
   <h1 class="pub-c-title__text <% if average_title_length %>pub-c-title__text--<%= average_title_length %><% end %>">
     <%= title %>

test/govuk_component/title_test.rb

@@ -21,6 +21,11 @@ def component_name
     assert_select ".pub-c-title__context", text: "Format"
   end
 
+  test "title context link appears" do
+    render_component(title: "Hello World", context: { text: "Format", href: "/format", data: { tracking: true } })
+    assert_select ".pub-c-title__context-link[href='/format'][data-tracking]", text: "Format"
+  end
+
   test "applies title length if supplied" do
     render_component(title: "Hello World", context: "format", average_title_length: 'long')
     assert_select ".pub-c-title .pub-c-title__text--long", text: "Hello World"