From 105f369d914e67ef509954f06d51ce0ee60f9a68 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Wed, 11 Sep 2024 11:13:35 +0200
Subject: [PATCH] :art: udpate localization switch (#2499)

---
 sanityv3/schemas/textSnippets.ts              |  5 +++++
 .../shared/LocalizationSwitch.tsx             | 21 +++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
index a1b308ec8..903206bdf 100644
--- a/sanityv3/schemas/textSnippets.ts
+++ b/sanityv3/schemas/textSnippets.ts
@@ -744,6 +744,11 @@ const snippets: textSnippet = {
     defaultValue: 'Close',
     group: groups.others,
   },
+  switch_to: {
+    title: 'Switch to',
+    defaultValue: 'Switch to',
+    group: groups.others,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }
diff --git a/web/pageComponents/shared/LocalizationSwitch.tsx b/web/pageComponents/shared/LocalizationSwitch.tsx
index 6db99d867..aeb017724 100644
--- a/web/pageComponents/shared/LocalizationSwitch.tsx
+++ b/web/pageComponents/shared/LocalizationSwitch.tsx
@@ -1,3 +1,4 @@
+import { useIntl } from 'react-intl'
 import { languages } from '../../languages'
 import { ButtonLink } from '@core/Link'
 
@@ -9,14 +10,16 @@ export type LocalizationSwitchProps = {
 }
 
 export const LocalizationSwitch = ({ allSlugs: slugs, activeLocale, ...rest }: LocalizationSwitchProps) => {
+  const intl = useIntl()
+
   if (slugs.length < 1) return null
 
   return (
-    <div className="flex items-center md:divide-x md:divide-dashed md:divide-gray-400 " {...rest}>
+    <ul className="flex items-center md:divide-x md:divide-dashed md:divide-gray-400 " {...rest}>
       {slugs.map((obj) => {
         const language = languages.find((lang) => lang.name === obj.lang)
         return (
-          <div
+          <li
             className={`flex items-center ${activeLocale === String(language?.locale) ? 'hidden md:block' : ''} `}
             key={obj.lang}
           >
@@ -24,9 +27,15 @@ export const LocalizationSwitch = ({ allSlugs: slugs, activeLocale, ...rest }: L
               variant="ghost"
               href={obj.slug}
               locale={`${language?.locale}`}
-              className={`flex flex-col gap-0 items-stretch px-2 text-xs`}
+              className={`
+                ${activeLocale === String(language?.locale) ? 'hidden md:block' : ''}
+                flex flex-col gap-0 items-stretch px-2 text-xs
+                `}
             >
-              <span className="sr-only">{`Switch to ${language?.title}`}</span>
+              <span className="sr-only">{`${intl.formatMessage({
+                id: 'switch_to',
+                defaultMessage: 'Switch to',
+              })} ${language?.title}`}</span>
               <span
                 aria-hidden
                 className={`uppercase ${activeLocale === String(language?.locale) ? 'font-bold' : 'font-normal'}`}
@@ -34,9 +43,9 @@ export const LocalizationSwitch = ({ allSlugs: slugs, activeLocale, ...rest }: L
                 {language?.locale}
               </span>
             </ButtonLink>
-          </div>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }