UU-gjennomgang (#157)

-  Logo - lenke mangler tekstrepresentasjon
-  Fiks ikoner (bl.a. språkvelger og skjermdeling)
-  Søkefeltet (autocomplete)
-  Skjermleser ved Alerts
- Hopp til hovedinnhold

packages/client/src/styles/skiplink.module.css

@@ -0,0 +1,28 @@
+.skiplink {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 1001;
+}
+.skiplink:focus,
+.skiplink:active {
+  clip: auto;
+  height: 2.625rem;
+  width: auto;
+  padding: 0.8rem;
+  margin: 0;
+  overflow: visible;
+  position: absolute;
+}
+.skiplink:focus {
+  outline: none;
+  color: white;
+  text-decoration: none;
+  background-color: var(--a-border-focus);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}

packages/server/.env.sample

@@ -2,6 +2,7 @@ ENONICXP_SERVICES=https://www.dev.nav.no/_/service/
 XP_BASE_URL=https://www.intern.dev.nav.no
 PORT=8089
 ENV=localhost
+NODE_ENV=development
 CDN_URL=http://localhost:8089/public
 AUTH_API=http://localhost:8089/api/auth
 HOST=http://localhost:8089

packages/server/src/texts.ts

@@ -12,6 +12,7 @@ import { Texts } from 'decorator-shared/types';
 // 'delskjerm-modal-hjelpetekst-2-se': `Det er du som godkjenner skjermdeling. Ingenting blir lagret.`,
 
 const nb = {
+  skip_link: 'Hopp til hovedinnhold',
   share_screen: 'Del skjerm med veileder',
   to_top: 'Til toppen',
   menu: 'Meny',
@@ -61,7 +62,6 @@ const nb = {
     'Helsepersonell, tiltaksarrangører, fylker og kommuner',
   loading_notifications: 'Laster varslinger',
   notifications_error: 'Feil ved lasting av varsler',
-  til_forsiden: 'Til forsiden',
   how_can_we_help: 'Hva kan vi hjelpe deg med?',
   showing: 'Viser',
   of: 'av',
@@ -96,6 +96,7 @@ export type LangBaseKeys = keyof typeof nb;
 export const texts: Record<Language, Texts> = {
   nb,
   en: {
+    skip_link: 'Go to main content',
     share_screen: 'Share screen with your counsellor',
     to_top: 'To the top',
     menu: 'Menu',
@@ -147,7 +148,6 @@ export const texts: Record<Language, Texts> = {
       'Health personnel, intervention organizers, counties and municipalities',
     loading_notifications: 'Loading notifications',
     notifications_error: 'Error loading notifications',
-    til_forsiden: 'To the frontpage',
     how_can_we_help: 'What can we help you with?',
     showing: 'Showing',
     of: 'of',
@@ -177,6 +177,7 @@ export const texts: Record<Language, Texts> = {
     go_to_my_page: 'Go to my page',
   },
   se: {
+    skip_link: 'Hopp til hovedinnhold',
     share_screen: 'Del skjerm med veileder',
     to_top: 'Til toppen',
     menu: 'Meny',
@@ -226,7 +227,6 @@ export const texts: Record<Language, Texts> = {
       'Helsepersonell, tiltaksarrangører, fylker og kommuner',
     loading_notifications: 'Laster varslinger',
     notifications_error: 'Feil ved lasting av varsler',
-    til_forsiden: 'Til forsiden',
     how_can_we_help: 'Hva kan vi hjelpe deg med?',
     showing: 'Viser',
     of: 'av',

packages/server/src/views/footer/screenshare-button.ts

@@ -13,6 +13,7 @@ export const ScreenshareButton = (text: string) =>
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       focusable="false"
+      aria-hidden="true"
       role="img"
     >
       <path

packages/server/src/views/header/complex-header.ts

@@ -1,18 +1,19 @@
 import clsx from 'clsx';
-import menuCls from 'decorator-client/src/styles/complex-header-menu.module.css';
 import cls from 'decorator-client/src/styles/header.module.css';
+import menuCls from 'decorator-client/src/styles/complex-header-menu.module.css';
 import menuItemsCls from 'decorator-client/src/styles/menu-items.module.css';
 import opsMessagesCls from 'decorator-client/src/styles/ops-messages.module.css';
+import utilsCls from 'decorator-client/src/styles/utilities.module.css';
 import { ContextLink } from 'decorator-shared/context';
 import html, { Template } from 'decorator-shared/html';
 import { Context, Language } from 'decorator-shared/params';
 import { OpsMessage, Texts } from 'decorator-shared/types';
-import utilsCls from 'decorator-client/src/styles/utilities.module.css';
 import {
   BurgerIcon,
   LoginIcon,
   SearchIcon,
 } from 'decorator-shared/views/icons';
+import { SkipLink } from 'decorator-shared/views/skiplink';
 import { NavLogo } from 'decorator-shared/views/nav-logo';
 import { DropdownMenu } from '../dropdown-menu';
 import { IconButton } from '../icon-button';
@@ -40,7 +41,8 @@ export function ComplexHeader({
   return html`
     <div id="decorator-header">
       <header class="${cls.siteheader}">
-        <div class="${cls.hovedmenyWrapper} ${utilsCls.contentContainer}">
+        ${SkipLink(texts.skip_link)}
+        <nav class="${cls.hovedmenyWrapper} ${utilsCls.contentContainer}">
           <div class="${cls.hovedmenyContent}">
             <a
               is="lenke-med-sporing"
@@ -53,6 +55,7 @@ export function ComplexHeader({
               data-attach-context
             >
               ${NavLogo({
+                  title: texts.to_front_page,
                 id: 'dekoratoren-header-logo'
               })}
             </a>
@@ -121,7 +124,7 @@ export function ComplexHeader({
               })}
             </div>
           </div>
-        </div>
+        </nav>
       </header>
       <ops-messages class="${opsMessagesCls.opsMessages}"
         >${opsMessages.length > 0 && OpsMessages({ opsMessages })}</ops-messages

packages/server/src/views/header/simple-header.ts

@@ -1,11 +1,12 @@
 import cls from 'decorator-client/src/styles/header.module.css';
 import menuItemsCls from 'decorator-client/src/styles/menu-items.module.css';
 import opsMessagesCls from 'decorator-client/src/styles/ops-messages.module.css';
+import utilsCls from 'decorator-client/src/styles/utilities.module.css';
 import html, { Template } from 'decorator-shared/html';
 import { Texts } from 'decorator-shared/types';
-import utilsCls from 'decorator-client/src/styles/utilities.module.css';
 import { LoginIcon } from 'decorator-shared/views/icons';
 import { IconButton } from '../icon-button';
+import { SkipLink } from 'decorator-shared/views/skiplink';
 import { NavLogo } from 'decorator-shared/views/nav-logo';
 
 export type SimpleHeaderProps = {
@@ -19,7 +20,8 @@ export const SimpleHeader = ({
 }: SimpleHeaderProps) => html`
   <div id="decorator-header">
     <header class="${cls.siteheader}">
-      <div class="${cls.hovedmenyWrapper} ${utilsCls.contentContainer}">
+      ${SkipLink(texts.skip_link)}
+      <nav class="${cls.hovedmenyWrapper} ${utilsCls.contentContainer}">
         <a
           is="lenke-med-sporing"
           href="/"
@@ -31,6 +33,7 @@ export const SimpleHeader = ({
           data-attach-context
         >
           ${NavLogo({
+              title: texts.to_front_page,
               id: 'dekoratoren-header-logo'
           })}
         </a>
@@ -41,7 +44,7 @@ export const SimpleHeader = ({
             text: texts.login,
           })}
         </user-menu>
-      </div>
+      </nav>
     </header>
     <ops-messages class="${opsMessagesCls.opsMessages}"></ops-messages>
     ${decoratorUtils}

packages/server/src/views/search-form.ts

@@ -20,6 +20,7 @@ export const SearchForm = ({ texts }: SearchFormProps) => {
           type="text"
           name="search"
           id="${id}"
+          autocomplete="off"
         />
         <button type="button" class="${cls.clear}">${CloseIcon({})}</button>
       </search-input>

packages/shared/types.ts

@@ -52,6 +52,7 @@ export type ClientTexts = {
 };
 
 export type Texts = ClientTexts & {
+  skip_link: string;
   share_screen: string;
   to_top: string;
   menu: string;
@@ -85,7 +86,6 @@ export type Texts = ClientTexts & {
   meny_bunnlenke_samarbeidspartner_stikkord: string;
   loading_notifications: string;
   notifications_error: string;
-  til_forsiden: string;
   how_can_we_help: string;
   showing: string;
   of: string;

packages/shared/views/alert.ts

@@ -19,13 +19,22 @@ type AlertProps = {
 
 export type AlertVariant = AlertProps['variant'];
 
-export const Alert = (props: AlertProps) => {
-  const icon = alertIcons[props.variant];
+const role = {
+  info: undefined,
+  success: 'status',
+  warning: 'status',
+  error: 'alert',
+};
 
+export const Alert = (props: AlertProps) => {
+  const { variant, content, className } = props;
   return html`
-    <div class="${clsx(cls.alert, cls[props.variant], props.className)}">
-      ${icon}
-      <div class="${cls.text}">${props.content}</div>
+    <div
+      role="${role[variant]}"
+      class="${clsx(cls.alert, cls[variant], className)}"
+    >
+      ${alertIcons[variant]}
+      <span class="${cls.text}">${content}</span>
     </div>
   `;
 };

packages/shared/views/icons/badge.ts

@@ -8,6 +8,7 @@ export const BadgeIcon = ({ className }: { className?: string } = {}) =>
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
+    aria-hidden="true"
     role="img"
     ${className && html`class="${className}"`}
   >

packages/shared/views/icons/briefcase.ts

@@ -8,6 +8,7 @@ export const BriefcaseIcon = ({ className }: { className?: string } = {}) =>
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
+    aria-hidden="true"
     role="img"
     ${className && html`class="${className}"`}
   >

packages/shared/views/icons/burger.ts

@@ -10,8 +10,8 @@ export const BurgerIcon = () =>
     viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="2"
-    aria-hidden="true"
     focusable="false"
+    aria-hidden="true"
     role="img"
     class="${cls.menuBurger}"
   >

packages/shared/views/icons/close.ts

@@ -9,6 +9,7 @@ export function CloseIcon({ className = '' }: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       focusable="false"
+      aria-hidden="true"
       role="img"
       class="${className}"
     >

packages/shared/views/icons/down-chevron.ts

@@ -10,6 +10,7 @@ export const DownChevronIcon = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
+    aria-hidden="true"
     role="img"
     ${className && html`class="${className}"`}
   >

packages/shared/views/icons/error.ts

@@ -9,6 +9,7 @@ export function ErrorIcon({ className }: { className?: string } = {}) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       focusable="false"
+      aria-hidden="true"
       role="img"
       ${className && html`class="${className}"`}
     >

packages/shared/views/icons/forward-chevron.ts

@@ -9,8 +9,8 @@ export function ForwardChevron(props?: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       focusable="false"
-      role="img"
       aria-hidden="true"
+      role="img"
       ${spreadProps({
         class: props?.className,
       })}

packages/shared/views/icons/globe.ts

@@ -8,6 +8,7 @@ export const GlobeIcon = ({ className }: { className?: string } = {}) =>
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
+    aria-hidden="true"
     role="img"
     ${className && html`class="${className}"`}
   >

packages/shared/views/icons/home.ts

@@ -1,23 +1,20 @@
 import html from '../../html';
 
-export function HomeIcon({ className }: { className?: string }) {
-  return html`
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      focusable="false"
-      role="img"
-      ${className ? html`class="${className}"` : ''}
+export const HomeIcon = ({ className }: { className?: string } = {}) =>
+    html`<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        focusable="false"
+        aria-hidden="true"
+        role="img"
+        ${className && html`class="${className}"`}
     >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.47 2.47a.75.75 0 0 1 1.06 0l7 7c.141.14.22.331.22.53v11a.75.75 0 0 1-.75.75h-5a.75.75 0 0 1-.75-.75v-4.25h-2.5V21a.75.75 0 0 1-.75.75H5a.75.75 0 0 1-.75-.75V10a.75.75 0 0 1 .22-.53l7-7Zm-5.72 7.84v9.94h3.5V16a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 .75.75v4.25h3.5v-9.94L12 4.06l-6.25 6.25Z"
-        fill="currentColor"
-      ></path>
-    </svg>
-  `;
-}
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.47 2.47a.75.75 0 0 1 1.06 0l7 7c.141.14.22.331.22.53v11a.75.75 0 0 1-.75.75h-5a.75.75 0 0 1-.75-.75v-4.25h-2.5V21a.75.75 0 0 1-.75.75H5a.75.75 0 0 1-.75-.75V10a.75.75 0 0 1 .22-.53l7-7Zm-5.72 7.84v9.94h3.5V16a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 .75.75v4.25h3.5v-9.94L12 4.06l-6.25 6.25Z"
+            fill="currentColor"
+        ></path>
+    </svg> `;

packages/shared/views/icons/info-square.ts

@@ -8,6 +8,7 @@ export const InfoSquareIcon = ({ className }: { className: string }) =>
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
+    aria-hidden="true"
     role="img"
     ${className && html`class="${className}"`}
   >

packages/shared/views/icons/info.ts

@@ -6,7 +6,9 @@ export const InfoIcon = ({ className }: { className?: string } = {}) =>
     width="24"
     height="24"
     viewBox="0 0 24 24"
+    focusable="false"
     aria-hidden="true"
+    role="img"
     ${className && html`class="${className}"`}
   >
     <path

packages/shared/views/icons/lock.ts

@@ -3,20 +3,15 @@ import html from '../../html';
 type Props = { width?: string; height?: string };
 
 export const Lock = ({ width, height }: Props) => {
-  //@TODO: UU better impl
-  const id = Math.random().toString(36).substring(7);
-
   return html` <svg
     xmlns="http://www.w3.org/2000/svg"
     width="${width}"
     height="${height}"
     viewBox="0 0 16 24"
-    role="img"
-    focusable="{false}"
+    focusable="false"
     aria-hidden="true"
-    aria-labelledby="lockIcon${id}"
+    role="img"
   >
-    <title id="lockIcon${id}" />
     <path
       fill="currentColor"
       stroke="none"

packages/shared/views/icons/login.ts

@@ -8,9 +8,8 @@ export function LoginIcon({ className }: { className?: string }) {
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
-    role="img"
     aria-labelledby="decorator-login-icon"
-    aria-hidden="true"
+    role="img"
     ${className && html`class="${className}"`}
   >
     <title id="decorator-login-icon">Logginn-ikon</title>