UU landmarks

packages/server/src/render-index.ts

@@ -28,13 +28,11 @@ export default async ({
 }) => {
   const { language, breadcrumbs, availableLanguages } = data;
   const localTexts = texts[language];
-
   const features = unleashService.getFeatures();
-
-
   const decoratorUtils = DecoratorUtils({
     breadcrumbs,
     availableLanguages,
+    localTexts,
     utilsBackground: data.utilsBackground,
     hidden: isExternallyAvailable(clientEnv.APP_URL)
   });

packages/server/src/request-handler.ts

@@ -231,6 +231,7 @@ const requestHandler = async (
       const decoratorUtils = DecoratorUtils({
         breadcrumbs,
         availableLanguages,
+        localTexts,
         utilsBackground,
         hidden: isExternallyAvailable(clientEnv.APP_URL)
       });

packages/server/src/texts.ts

@@ -24,6 +24,7 @@ const nb = {
   login: 'Logg inn',
   logout: 'Logg ut',
   logged_in: 'Logget inn',
+  language_selector: 'Velg språk',
   notifications: 'Varsler',
   notifications_empty_list: 'Du har ingen nye varsler',
   notifications_empty_list_description: 'Vi varsler deg når noe skjer.',
@@ -109,6 +110,7 @@ export const texts: Record<Language, Texts> = {
     login: 'Log in',
     logout: 'Log out',
     logged_in: 'Logged in',
+    language_selector: 'Choose language',
     notifications: 'Notifications',
     notifications_empty_list: 'You have no new notifications',
     notifications_empty_list_description:
@@ -191,6 +193,7 @@ export const texts: Record<Language, Texts> = {
     login: 'Sisačáliheapmi',
     logout: 'Olggosčáliheapmi',
     logged_in: 'Logget inn',
+    language_selector: 'Velg språk',
     notifications: 'Varsler',
     notifications_empty_list: 'Du har ingen nye varsler',
     notifications_empty_list_description: 'Vi varsler deg når noe skjer.',

packages/server/src/views/decorator-utils.ts

@@ -2,34 +2,38 @@ import clsx from 'clsx';
 import cls from 'decorator-client/src/styles/decorator-utils.module.css';
 import html from 'decorator-shared/html';
 import {
-  AvailableLanguage,
-  Breadcrumb,
-  UtilsBackground,
+    AvailableLanguage,
+    Breadcrumb,
+    UtilsBackground,
 } from 'decorator-shared/params';
+import { Texts } from 'decorator-shared/types';
 import utilsCls from 'decorator-client/src/styles/utilities.module.css';
 import { Breadcrumbs } from 'decorator-shared/views/breadcrumbs';
 import { LanguageSelector } from './language-selector';
 
 export type DecoratorUtilsProps = {
-  breadcrumbs: Breadcrumb[];
-  availableLanguages: AvailableLanguage[];
-  utilsBackground: UtilsBackground;
-  hidden: boolean
+    breadcrumbs: Breadcrumb[];
+    availableLanguages: AvailableLanguage[];
+    localTexts: Texts;
+    utilsBackground: UtilsBackground;
+    hidden: boolean
 };
 
 export const DecoratorUtils = ({
-  breadcrumbs,
-  availableLanguages,
-  utilsBackground,
-  hidden,
-}: DecoratorUtilsProps) =>
-  html`<decorator-utils
-    class="${clsx(utilsCls.contentContainer, cls.decoratorUtils, {
-      [cls.hidden]: (availableLanguages.length === 0 && breadcrumbs.length === 0) || hidden,
-      [cls.white]: utilsBackground === 'white',
-      [cls.gray]: utilsBackground === 'gray',
-    })}"
-  >
-    <nav is="d-breadcrumbs">${Breadcrumbs({ breadcrumbs })}</nav>
-    ${LanguageSelector({ availableLanguages })}
-  </decorator-utils>`;
+    breadcrumbs,
+    availableLanguages,
+    localTexts,
+    utilsBackground,
+    hidden,
+}: DecoratorUtilsProps) => html`
+    <decorator-utils
+        class="${clsx(utilsCls.contentContainer, cls.decoratorUtils, {
+            [cls.hidden]: (availableLanguages.length === 0 && breadcrumbs.length === 0) || hidden,
+            [cls.white]: utilsBackground === 'white',
+            [cls.gray]: utilsBackground === 'gray',
+        })}"
+    >
+        <nav is="d-breadcrumbs">${Breadcrumbs({ breadcrumbs })}</nav>
+        ${LanguageSelector({ availableLanguages, localTexts })}
+    </decorator-utils>
+`;

packages/server/src/views/language-selector.stories.ts

@@ -3,6 +3,7 @@ import type { LanguageSelectorProps } from './language-selector';
 import { LanguageSelector } from './language-selector';
 import { LanguageSelector as ClientComponent } from 'decorator-client/src/views/language-selector';
 import html from 'decorator-shared/html';
+import { texts } from '../texts';
 
 const meta: Meta<LanguageSelectorProps> = {
   title: 'header/language-selector',
@@ -33,5 +34,6 @@ export const Default: Story = {
       { locale: 'nb', handleInApp: true },
       { locale: 'en', url: 'https://www.nav.no/en/person', handleInApp: false },
     ],
+    localTexts: texts['en']
   },
 };

packages/server/src/views/language-selector.ts

@@ -1,28 +1,31 @@
 import clsx from 'clsx';
 import html from 'decorator-shared/html';
 import { AvailableLanguage } from 'decorator-shared/params';
+import { Texts } from "decorator-shared/types";
 import { DownChevronIcon, GlobeIcon } from 'decorator-shared/views/icons';
 import cls from 'decorator-client/src/styles/language-selector.module.css';
 
 export type LanguageSelectorProps = {
-  availableLanguages: AvailableLanguage[];
+    availableLanguages: AvailableLanguage[];
+    localTexts: Texts;
 };
 
 export const LanguageSelector = ({
-  availableLanguages,
+    availableLanguages,
+    localTexts
 }: LanguageSelectorProps) => html`
-  <language-selector>
-  <div class="${clsx(cls.languageSelector, {
-      [cls.empty]: availableLanguages.length === 0,
-    })}"
-  >
-    <button type="button" class="${cls.button}">
-      ${GlobeIcon({ className: cls.icon })}
-      <span>
-        <span lang="nb">${'Språk'}</span>/<span lang="en">Language</span>
-      </span>
-      ${DownChevronIcon({ className: cls.icon })}
-    </button>
-    </div>
-  </language-selector>
+    <language-selector>
+        <nav
+            class="${clsx(cls.languageSelector, {[cls.empty]: availableLanguages.length === 0})}"
+            aria-label="${localTexts.language_selector}"
+        >
+            <button type="button" class="${cls.button}">
+                ${GlobeIcon({ className: cls.icon })}
+                <span>
+                    <span lang="nb">${'Språk'}</span>/<span lang="en">Language</span>
+                </span>
+                ${DownChevronIcon({ className: cls.icon })}
+            </button>
+        </nav>
+    </language-selector>
 `;

packages/server/src/views/ops-messages.ts

@@ -9,7 +9,7 @@ export type OpsMessagesProps = {
 };
 
 export const OpsMessages = ({ opsMessages }: OpsMessagesProps) => html`
-  <div class="${cls.opsMessagesContent} ${utilsCls.contentContainer}">
+  <section class="${cls.opsMessagesContent} ${utilsCls.contentContainer}">
     ${opsMessages.map(
       ({ heading, url, type }) =>
         html`<lenke-med-sporing
@@ -24,5 +24,5 @@ export const OpsMessages = ({ opsMessages }: OpsMessagesProps) => html`
           <span>${heading}</span>
         </lenke-med-sporing>`,
     )}
-  </div>
+  </section>
 `;

packages/shared/types.ts

@@ -62,6 +62,7 @@ export type Texts = ClientTexts & {
     clear: string;
     login: string;
     logged_in: string;
+    language_selector: string;
     notifications: string;
     notifications_empty_list: string;
     notifications_empty_list_description: string;