Language switcher improvements by domoscargin · Pull Request #7267 · alphagov/govuk-frontend

domoscargin · 2026-07-09T08:04:59Z

tweaks from tech review
thickens separator
stretch separator to full line-height
adds language link description
adds inverse styles

github-actions · 2026-07-09T08:08:49Z

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index f44a0602b..6d64bfa19 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3733,18 +3733,10 @@ screen and (forced-colors:active) {
     list-style-type: none
 }
 
-.govuk-language-switcher__list-item {
-    display: flex;
-    align-items: center
-}
-
-.govuk-language-switcher__list-item:not(:last-child):after {
-    content: "";
-    display: block;
-    height: 1em;
+.govuk-language-switcher__list-item:not(:last-child) {
     margin-right: 10px;
-    margin-left: 10px;
-    border-right: 1px solid;
+    padding-right: 10px;
+    border-right: 2px solid;
     border-right-color: var(--govuk-secondary-text-colour, #484949)
 }
 
@@ -3805,6 +3797,20 @@ screen and (forced-colors:active) {
     color: var(--govuk-focus-text-colour, #0b0c0c)
 }
 
+.govuk-language-switcher--inverse,
+.govuk-language-switcher--inverse .govuk-language-switcher__link:link,
+.govuk-language-switcher--inverse .govuk-language-switcher__link:visited {
+    color: #fff
+}
+
+.govuk-language-switcher--inverse .govuk-language-switcher__link:focus {
+    color: var(--govuk-focus-text-colour, #0b0c0c)
+}
+
+.govuk-language-switcher--inverse .govuk-language-switcher__list-item {
+    border-right-color: #fff
+}
+
 .govuk-notification-banner {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

Action run for 5d77792

github-actions · 2026-07-09T08:08:49Z

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html
index 6f5473653..3ac08644e 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html
@@ -5,7 +5,8 @@
       <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/cy" lang="cy" hreflang="cy" rel="alternate">Cymraeg</a>
+      <a class="govuk-language-switcher__link" href="#/cy" rel="alternate" lang="cy" hreflang="cy">Cymraeg</a>
+      <span class="govuk-visually-hidden">Change the language to Cymraeg</span>
     </li>
   </ul>
 </nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-inverse.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-inverse.html
new file mode 100644
index 000000000..e14a055cf
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-inverse.html
@@ -0,0 +1,12 @@
+
+<nav class="govuk-language-switcher govuk-language-switcher--inverse" aria-label="Language switcher">
+  <ul class="govuk-language-switcher__list">
+    <li class="govuk-language-switcher__list-item">
+      <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
+    </li>
+    <li class="govuk-language-switcher__list-item">
+      <a class="govuk-language-switcher__link" href="#/cy" rel="alternate" lang="cy" hreflang="cy">Cymraeg</a>
+      <span class="govuk-visually-hidden">Change the language to Cymraeg</span>
+    </li>
+  </ul>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-language-description.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-language-description.html
new file mode 100644
index 000000000..cc4591fa1
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-language-description.html
@@ -0,0 +1,12 @@
+
+<nav class="govuk-language-switcher" lang="cy" aria-label="Language switcher">
+  <ul class="govuk-language-switcher__list">
+    <li class="govuk-language-switcher__list-item">
+      <a class="govuk-language-switcher__link" href="#/en" rel="alternate" lang="en" hreflang="en">English</a>
+      <span class="govuk-visually-hidden">Newid yr iaith i&#39;r Saesneg</span>
+    </li>
+    <li class="govuk-language-switcher__list-item">
+      <span class="govuk-language-switcher__text" lang="cy" aria-current="true">Cymraeg</span>
+    </li>
+  </ul>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html
index f1cea1c41..ee26d6423 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html
@@ -5,7 +5,8 @@
       <span class="govuk-language-switcher__text" lang="en" dir="ltr" aria-current="true">English</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/ar" lang="ar" hreflang="ar" dir="rtl" rel="alternate">العربية</a>
+      <a class="govuk-language-switcher__link" href="#/ar" rel="alternate" lang="ar" hreflang="ar" dir="rtl">العربية</a>
+      <span class="govuk-visually-hidden">Change the language to العربية</span>
     </li>
   </ul>
 </nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html
index c6c63a699..da68de83d 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html
@@ -5,19 +5,24 @@
       <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/fr" lang="fr" hreflang="fr" rel="alternate">Français</a>
+      <a class="govuk-language-switcher__link" href="#/fr" rel="alternate" lang="fr" hreflang="fr">Français</a>
+      <span class="govuk-visually-hidden">Change the language to Français</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/hi" lang="hi" hreflang="hi" rel="alternate">हिंदी</a>
+      <a class="govuk-language-switcher__link" href="#/hi" rel="alternate" lang="hi" hreflang="hi">हिंदी</a>
+      <span class="govuk-visually-hidden">Change the language to हिंदी</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/ja" lang="ja" hreflang="ja" rel="alternate">日本語</a>
+      <a class="govuk-language-switcher__link" href="#/ja" rel="alternate" lang="ja" hreflang="ja">日本語</a>
+      <span class="govuk-visually-hidden">Change the language to 日本語</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/ur" lang="ur" hreflang="ur" rel="alternate">اردو</a>
+      <a class="govuk-language-switcher__link" href="#/ur" rel="alternate" lang="ur" hreflang="ur">اردو</a>
+      <span class="govuk-visually-hidden">Change the language to اردو</span>
     </li>
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/zh" lang="zh" hreflang="zh" rel="alternate">中文</a>
+      <a class="govuk-language-switcher__link" href="#/zh" rel="alternate" lang="zh" hreflang="zh">中文</a>
+      <span class="govuk-visually-hidden">Change the language to 中文</span>
     </li>
   </ul>
 </nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html
index b6025a0d7..8bd00d857 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html
@@ -2,7 +2,8 @@
 <nav class="govuk-language-switcher" lang="cy" aria-label="Dewis iaith">
   <ul class="govuk-language-switcher__list">
     <li class="govuk-language-switcher__list-item">
-      <a class="govuk-language-switcher__link" href="#/en" lang="en" hreflang="en" rel="alternate">English</a>
+      <a class="govuk-language-switcher__link" href="#/en" rel="alternate" lang="en" hreflang="en">English</a>
+      <span class="govuk-visually-hidden">Change the language to English</span>
     </li>
     <li class="govuk-language-switcher__list-item">
       <span class="govuk-language-switcher__text" lang="cy" aria-current="true">Cymraeg</span>

Action run for 5d77792

github-actions · 2026-07-09T08:08:50Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss
index 539bfbe20..4dadefef3 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss
@@ -20,19 +20,11 @@
   }
 
   .govuk-language-switcher__list-item {
-    display: flex;
-    align-items: center;
-
     &:not(:last-child) {
-      &::after {
-        content: "";
-        display: block;
-        height: 1em;
-        margin-right: base.govuk-spacing(2);
-        margin-left: base.govuk-spacing(2);
-        border-right: 1px solid;
-        border-right-color: base.govuk-functional-colour(secondary-text);
-      }
+      margin-right: base.govuk-spacing(2);
+      padding-right: base.govuk-spacing(2);
+      border-right: 2px solid;
+      border-right-color: base.govuk-functional-colour(secondary-text);
     }
   }
 
@@ -40,5 +32,17 @@
     @include base.govuk-link-common;
     @include base.govuk-link-style-default;
   }
+
+  .govuk-language-switcher--inverse {
+    color: base.govuk-colour("white");
+
+    .govuk-language-switcher__link {
+      @include base.govuk-link-style-inverse;
+    }
+
+    .govuk-language-switcher__list-item {
+      border-right-color: base.govuk-colour("white");
+    }
+  }
 }
 
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json b/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json
index 89cade6e6..720139cdd 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json
@@ -21,7 +21,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": true,
-            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" rel=\"alternate\" lang=\"cy\" hreflang=\"cy\">Cymraeg</a>\n      <span class=\"govuk-visually-hidden\">Change the language to Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "with multiple languages",
@@ -63,7 +63,32 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/fr\" lang=\"fr\" hreflang=\"fr\" rel=\"alternate\">Français</a>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/hi\" lang=\"hi\" hreflang=\"hi\" rel=\"alternate\">हिंदी</a>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/ja\" lang=\"ja\" hreflang=\"ja\" rel=\"alternate\">日本語</a>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/ur\" lang=\"ur\" hreflang=\"ur\" rel=\"alternate\">اردو</a>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/zh\" lang=\"zh\" hreflang=\"zh\" rel=\"alternate\">中文</a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/fr\" rel=\"alternate\" lang=\"fr\" hreflang=\"fr\">Français</a>\n      <span class=\"govuk-visually-hidden\">Change the language to Français</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/hi\" rel=\"alternate\" lang=\"hi\" hreflang=\"hi\">हिंदी</a>\n      <span class=\"govuk-visually-hidden\">Change the language to हिंदी</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/ja\" rel=\"alternate\" lang=\"ja\" hreflang=\"ja\">日本語</a>\n      <span class=\"govuk-visually-hidden\">Change the language to 日本語</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/ur\" rel=\"alternate\" lang=\"ur\" hreflang=\"ur\">اردو</a>\n      <span class=\"govuk-visually-hidden\">Change the language to اردو</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/zh\" rel=\"alternate\" lang=\"zh\" hreflang=\"zh\">中文</a>\n      <span class=\"govuk-visually-hidden\">Change the language to 中文</span>\n    </li>\n  </ul>\n</nav>"
+        },
+        {
+            "name": "inverse",
+            "options": {
+                "classes": "govuk-language-switcher--inverse",
+                "items": [
+                    {
+                        "text": "English",
+                        "lang": "en",
+                        "current": true
+                    },
+                    {
+                        "text": "Cymraeg",
+                        "lang": "cy",
+                        "href": "#/cy"
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "Language switcher that appears on dark backgrounds",
+            "pageTemplateOptions": {
+                "bodyClasses": "app-template__body--inverse"
+            },
+            "screenshot": true,
+            "html": "<nav class=\"govuk-language-switcher govuk-language-switcher--inverse\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" rel=\"alternate\" lang=\"cy\" hreflang=\"cy\">Cymraeg</a>\n      <span class=\"govuk-visually-hidden\">Change the language to Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "with translated navigation label",
@@ -89,7 +114,7 @@
             "description": "When the current page is not in English, translate the `ariaLabel` into the language of the current page.",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher\" lang=\"cy\" aria-label=\"Dewis iaith\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/en\" lang=\"en\" hreflang=\"en\" rel=\"alternate\">English</a>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"cy\" aria-current=\"true\">Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" lang=\"cy\" aria-label=\"Dewis iaith\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/en\" rel=\"alternate\" lang=\"en\" hreflang=\"en\">English</a>\n      <span class=\"govuk-visually-hidden\">Change the language to English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"cy\" aria-current=\"true\">Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "with mixed text directions",
@@ -113,7 +138,33 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" dir=\"ltr\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/ar\" lang=\"ar\" hreflang=\"ar\" dir=\"rtl\" rel=\"alternate\">العربية</a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" dir=\"ltr\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/ar\" rel=\"alternate\" lang=\"ar\" hreflang=\"ar\" dir=\"rtl\">العربية</a>\n      <span class=\"govuk-visually-hidden\">Change the language to العربية</span>\n    </li>\n  </ul>\n</nav>"
+        },
+        {
+            "name": "with language description",
+            "options": {
+                "attributes": {
+                    "lang": "cy"
+                },
+                "items": [
+                    {
+                        "text": "English",
+                        "lang": "en",
+                        "href": "#/en",
+                        "languageDescriptionText": "Newid yr iaith i'r Saesneg"
+                    },
+                    {
+                        "text": "Cymraeg",
+                        "lang": "cy",
+                        "current": true
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "Add visually hidden text, written in the language of the current page, so screen reader users know that selecting a link translates the page.",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<nav class=\"govuk-language-switcher\" lang=\"cy\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/en\" rel=\"alternate\" lang=\"en\" hreflang=\"en\">English</a>\n      <span class=\"govuk-visually-hidden\">Newid yr iaith i&#39;r Saesneg</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"cy\" aria-current=\"true\">Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "classes",
@@ -136,7 +187,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher app-language-switcher--custom-modifier\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher app-language-switcher--custom-modifier\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" rel=\"alternate\" lang=\"cy\" hreflang=\"cy\">Cymraeg</a>\n      <span class=\"govuk-visually-hidden\">Change the language to Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "attributes",
@@ -162,7 +213,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher\" id=\"my-language-switcher\" data-foo=\"bar\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" id=\"my-language-switcher\" data-foo=\"bar\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" rel=\"alternate\" lang=\"cy\" hreflang=\"cy\">Cymraeg</a>\n      <span class=\"govuk-visually-hidden\">Change the language to Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "item attributes",
@@ -187,7 +238,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\" data-attribute=\"my-attribute\">Cymraeg</a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" rel=\"alternate\" lang=\"cy\" hreflang=\"cy\" data-attribute=\"my-attribute\">Cymraeg</a>\n      <span class=\"govuk-visually-hidden\">Change the language to Cymraeg</span>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "html",
@@ -209,7 +260,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\"><span>Cymraeg</span></a>\n    </li>\n  </ul>\n</nav>"
+            "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n  <ul class=\"govuk-language-switcher__list\">\n    <li class=\"govuk-language-switcher__list-item\">\n      <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n    </li>\n    <li class=\"govuk-language-switcher__list-item\">\n      <a class=\"govuk-language-switcher__link\" href=\"#/cy\" rel=\"alternate\" lang=\"cy\" hreflang=\"cy\"><span>Cymraeg</span></a>\n      <span class=\"govuk-visually-hidden\">Change the language to undefined</span>\n    </li>\n  </ul>\n</nav>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json b/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json
index ba8f4ce4f..d0f77d0c3 100644
--- a/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json
@@ -33,7 +33,7 @@
                 "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 that use scripts with different directions."
+                "description": "The text direction for the language (`ltr` for left-to-right scripts or `rtl` for right-to-left). Set this on every item if the switcher contains a mix of language directions."
             },
             {
                 "name": "href",
@@ -47,6 +47,12 @@
                 "required": false,
                 "description": "Whether this is the language of the current page. Defaults to `true` when `href` is not provided."
             },
+            {
+                "name": "linkDescriptionText",
+                "type": "string",
+                "required": false,
+                "description": "Visually hidden text after a language link to indicate what the link will do. Defaults to \"Change the language to [language name]\". Write it in the language of the current page."
+            },
             {
                 "name": "attributes",
                 "type": "object",

Action run for 5d77792

github-actions · 2026-07-09T08:09:30Z

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	122.37 KiB	0.2%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	122.36 KiB	0.2%

No changes to module sizes.

Action run for 5d77792

domoscargin added 3 commits July 8, 2026 20:41

Tweaks from tech review

28516a6

See #7164 (comment)

Thicken separator

456a3d6

Stretch separator to full line-height

5d9584e

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-7267 July 9, 2026 08:05 Inactive

domoscargin added 2 commits July 9, 2026 09:28

Add language link description

b7c1375

Add inverse styles

5d77792

domoscargin force-pushed the bk-language-switcher-tweaks branch from 288c000 to 5d77792 Compare July 9, 2026 08:28

govuk-design-system-ci deployed to govuk-frontend-pr-7267 July 9, 2026 08:28 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Language switcher improvements#7267

Language switcher improvements#7267
domoscargin wants to merge 5 commits into
feature/language-switcherfrom
bk-language-switcher-tweaks

domoscargin commented Jul 9, 2026

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

domoscargin commented Jul 9, 2026

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stylesheets changes to npm package

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rendered HTML changes to npm package

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other changes to npm package

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Stats

File sizes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading