Add dir to language items

Author: domoscargin

packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.yaml

@@ -16,6 +16,10 @@ params:
         type: string
         required: true
         description: The language tag for the language (for example, `cy` for Welsh). Added as `lang` and `hreflang` attributes so that assistive technologies pronounce the language name correctly.
+      - name: dir
+        type: string
+        required: false
+        description: The text direction for the language item element. Use this on every item when the switcher includes languages with different directions.
       - name: href
         type: string
         required: false
@@ -84,6 +88,17 @@ examples:
         - text: Cymraeg
           lang: cy
           current: true
+  - name: with mixed text directions
+    options:
+      items:
+        - text: English
+          lang: en
+          dir: ltr
+          current: true
+        - text: العربية
+          lang: ar
+          dir: rtl
+          href: '#/ar'
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes

packages/govuk-frontend/src/govuk/components/language-switcher/template.jsdom.test.js

@@ -159,5 +159,22 @@ describe('Language switcher', () => {
 
       expect($link.innerHTML).toContain('<span>Cymraeg</span>')
     })
+
+    it('sets dir attributes on language items', () => {
+      document.body.innerHTML = render(
+        'language-switcher',
+        examples['with mixed text directions']
+      )
+
+      const $currentLanguage = document.querySelector(
+        '.govuk-language-switcher__text'
+      )
+      const $otherLanguage = document.querySelector(
+        '.govuk-language-switcher__link'
+      )
+
+      expect($currentLanguage).toHaveAttribute('dir', 'ltr')
+      expect($otherLanguage).toHaveAttribute('dir', 'rtl')
+    })
   })
 })

packages/govuk-frontend/src/govuk/components/language-switcher/template.njk

@@ -6,14 +6,16 @@
   {% if item.current %}
     <li class="govuk-language-switcher__list-item">
       <span class="govuk-language-switcher__text"
-        {%- if item.lang %} lang="{{ item.lang }}"{% endif %} aria-current="true">
+        {%- if item.lang %} lang="{{ item.lang }}"{% endif %}
+        {%- if item.dir %} dir="{{ item.dir }}"{% endif %} aria-current="true">
         {{- item.html | safe if item.html else item.text -}}
       </span>
     </li>
   {% else %}
     <li class="govuk-language-switcher__list-item">
       <a class="govuk-language-switcher__link" href="{{ item.href }}"
-        {%- if item.lang %} lang="{{ item.lang }}" hreflang="{{ item.lang }}"{% endif %} rel="alternate"
+        {%- if item.lang %} lang="{{ item.lang }}" hreflang="{{ item.lang }}"{% endif %}
+        {%- if item.dir %} dir="{{ item.dir }}"{% endif %} rel="alternate"
         {{- govukAttributes(item.attributes) }}>
         {{- item.html | safe if item.html else item.text -}}
       </a>