Merge pull request #1102 from alphagov/add-lang-options

Add lang attribute to heading component

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add ability to pass language to heading component ([PR #1102](https://github.com/alphagov/govuk_publishing_components/pull/1102))
+
 ## 20.2.2
 
 * Fix data attributes in delete summary list item ([PR #1103](https://github.com/alphagov/govuk_publishing_components/pull/1103))

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

@@ -1,5 +1,7 @@
 <%
   brand ||= false
+  lang = local_assigns[:lang].presence
+
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
@@ -12,5 +14,6 @@
 %>
 <%= content_tag(shared_helper.get_heading_level, text,
     class: classes,
-    id: heading_helper.id
+    id: heading_helper.id,
+    lang: lang
 ) %>

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

@@ -68,3 +68,11 @@ examples:
       brand: 'department-for-environment-food-rural-affairs'
       padding: true
       border_top: 5
+  with_lang_attribute:
+    description: |
+      The component is used on translated pages that don’t have a translation for the text strings. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.
+
+      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
+    data:
+      text: "Ein gweinidogion"
+      lang: "cy"

spec/components/heading_spec.rb

@@ -80,4 +80,9 @@ def component_name
     render_component(text: 'Branded', brand: 'attorney-generals-office')
     assert_select ".gem-c-heading.brand--attorney-generals-office.brand__border-color"
   end
+
+  it "adds a lang attribute if passed" do
+    render_component(text: 'Branded', lang: "cy")
+    assert_select ".gem-c-heading[lang=cy]"
+  end
 end