GYE-2403: Update library to service design guidelines for language to…

project/PlayCrossCompilation.scala

@@ -1,4 +1,4 @@
 import uk.gov.hmrc.playcrosscompilation.AbstractPlayCrossCompilation
-import uk.gov.hmrc.playcrosscompilation.PlayVersion.Play26
+import uk.gov.hmrc.playcrosscompilation.PlayVersion.Play27
 
-object PlayCrossCompilation extends AbstractPlayCrossCompilation(defaultPlayVersion = Play26)
+object PlayCrossCompilation extends AbstractPlayCrossCompilation(defaultPlayVersion = Play27)

src/main/resources/messages

@@ -1,4 +1,7 @@
 language.to=to
 language.month=month
 language.day.singular=day
-language.day.plural=days
+language.day.plural=days
+language.toggle.hidden.english=Change language to English
+language.toggle.hidden.cymraeg=Newid yr iaith ir Gymraeg
+language.toggle.aria.label=Language switcher

src/main/resources/messages.cy

@@ -1,4 +1,7 @@
 language.to=i
 language.month=mis
 language.day.singular=diwrnod
-language.day.plural=diwrnod
+language.day.plural=diwrnod
+language.toggle.hidden.english=Change language to English
+language.toggle.hidden.cymraeg=Newid yr iaith ir Gymraeg
+language.toggle.aria.label=Switcher iaith

src/main/scala/views/language_selection.scala.html

@@ -18,21 +18,24 @@
 
 @(langMap: Map[String, Lang], langToCall: String => Call, customClass: Option[String] = None, appName: Option[String] = None)(implicit messages: Messages)
 
-<p class="@if(customClass.isDefined) {@customClass.get}">
-
+<nav class="@if(customClass.isDefined) {@customClass.get} hmrc-language-select" aria-label="@messages("language.toggle.aria.label")">
+    <ul class="hmrc-language-select__list language-toggle" style="display: block;" >
     @langMap.map { case (key: String, value: Lang) =>
         @if(messages.lang.code != value.code) {
-            @Link.toInternalPage(
-                id      = Some(s"$key-switch"),
-                url     = s"${langToCall(key)}",
-                value   = Some(key.capitalize),
-                dataAttributes = appName.map(name => Map("journey-click" -> s"$name:language: ${value.code}"))
-            ).toHtml
+            <li class="hmrc-language-select__list-item" style="display: inline-block;" >
+                <a id="@key-switch" href="@langToCall(key)" target="_self" data-sso="false" data-journey-click="@{appName.map(name => s"$name:language: ${value.code}")}">
+                    <span class="visually-hidden">@messages(s"language.toggle.hidden.$key")</span>
+                    <span aria-hidden="true">@key.capitalize</span>
+                </a>
+            </li>
         } else {
-            @key.capitalize
+            <li class="hmrc-language-select__list-item" style="display: inline-block;" >
+                <span aria-current="true">@key.capitalize</span>
+            </li>
         }
         @if(key != langMap.last._1) {
             @Html(" | ")
         }
     }
-</p>
+    </ul>
+</nav>

src/test/scala/views/LanguageSelectionSpec.scala

@@ -56,8 +56,7 @@ class LanguageSelectionSpec extends PlaySpec with GuiceOneAppPerSuite {
     "show correct current language message when current language is English" in {
       val html = views.html.language_selection.render(languageMap, langToUrl, None, None, messagesEnglish)
       contentType(html) must be("text/html")
-      contentAsString(html) must include("English")
-      contentAsString(html) must not include ">English<"
+      contentAsString(html) must include("<span aria-current=\"true\">English</span>")
     }
 
     "give a link to switch to English when current language is Welsh" in {
@@ -70,14 +69,13 @@ class LanguageSelectionSpec extends PlaySpec with GuiceOneAppPerSuite {
     "show correct current language message when current language is Welsh" in {
       val html = views.html.language_selection.render(languageMap, langToUrl, None, None, messagesWelsh)
       contentType(html) must be("text/html")
-      contentAsString(html) must include("Cymraeg")
-      contentAsString(html) must not include ">Cymraeg<"
+      contentAsString(html) must include("<span aria-current=\"true\">Cymraeg</span>")
     }
 
     "show a custom class if it is set" in {
       val html = views.html.language_selection.render(languageMap, langToUrl, Some("float--right"), None, messagesWelsh)
       contentType(html) must be("text/html")
-      contentAsString(html) must include("class=\"float--right\"")
+      contentAsString(html) must include("class=\"float--right")
     }
 
     "show a data-journey-click attribute for GA if it is set and language is Welsh" in {
@@ -101,8 +99,7 @@ class LanguageSelectionSpec extends PlaySpec with GuiceOneAppPerSuite {
 
       val html = views.html.language_selection.render(mockLanguageMap, langToUrl, None, None, messagesSpanish)
       contentType(html) must be("text/html")
-      contentAsString(html) must include("Español")
-      contentAsString(html) must not include ">Español<"
+      contentAsString(html) must include("<span aria-current=\"true\">Español</span>")
     }
   }
 }