From f31471748ade74ba76e1ea4f8dd27a4145334c01 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 24 Jun 2024 12:46:40 +0200
Subject: [PATCH] temavelger a11y updates

---
 apps/storefront/components/Header/Header.tsx  |  6 +-
 apps/theme/components/Color/Color.module.css  |  4 +-
 apps/theme/components/Color/Color.tsx         |  2 +-
 .../components/ColorModal/ColorModal.tsx      |  6 +-
 .../ColorPicker/ColorPicker.module.css        |  8 ++-
 .../components/ColorPicker/ColorPicker.tsx    | 11 ++--
 apps/theme/components/CopyBtn/CopyBtn.tsx     |  8 ++-
 .../theme/components/Header/Header.module.css | 23 ++++---
 apps/theme/components/Header/Header.tsx       | 64 +++++++++++++------
 .../components/Previews/Previews.module.css   | 16 ++---
 apps/theme/components/Previews/Previews.tsx   | 11 ++++
 11 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx
index 2867d22018..9f53763a6d 100644
--- a/apps/storefront/components/Header/Header.tsx
+++ b/apps/storefront/components/Header/Header.tsx
@@ -41,7 +41,7 @@ const Header = () => {
       <div className={classes.container}>
         <div>
           <Link
-            className={classes.logoLink}
+            className={cl(classes.logoLink, 'ds-focus')}
             href='/'
             aria-label='Designsystem forside'
             onClick={() => setOpen(false)}
@@ -107,7 +107,7 @@ const Header = () => {
               <Link
                 href='https://github.com/digdir/designsystemet'
                 target='_blank'
-                className={cl(classes.linkIcon, classes.github)}
+                className={cl(classes.linkIcon, classes.github, 'ds-focus')}
                 title='Designsystemets GitHub-repositorium'
               >
                 <GithubLogo />
@@ -117,7 +117,7 @@ const Header = () => {
               <Link
                 href='https://www.figma.com/@designsystemet'
                 target='_blank'
-                className={cl(classes.linkIcon, classes.figma)}
+                className={cl(classes.linkIcon, classes.figma, 'ds-focus')}
                 title='Designsystemets Figma-prosjekt'
               >
                 <FigmaLogo />
diff --git a/apps/theme/components/Color/Color.module.css b/apps/theme/components/Color/Color.module.css
index 145343d50f..f03aab30fb 100644
--- a/apps/theme/components/Color/Color.module.css
+++ b/apps/theme/components/Color/Color.module.css
@@ -8,10 +8,10 @@
   font-weight: 400;
   border: 1px solid #e4e4e4;
   border-radius: 4px;
+  cursor: pointer;
 }
 
-.box:hover {
-  cursor: pointer;
+.box:hover:not(:focus-visible) {
   border-color: #fff;
   outline: 2px solid #535353;
   outline-offset: 1px;
diff --git a/apps/theme/components/Color/Color.tsx b/apps/theme/components/Color/Color.tsx
index 865227ef6c..347278fd96 100644
--- a/apps/theme/components/Color/Color.tsx
+++ b/apps/theme/components/Color/Color.tsx
@@ -41,7 +41,7 @@ const Color = ({
           );
         }}
         style={{ backgroundColor: color.hex }}
-        className={cl(classes.box, featured && classes.featured)}
+        className={cl(classes.box, featured && classes.featured, 'ds-focus')}
       ></button>
 
       {showColorMeta && (
diff --git a/apps/theme/components/ColorModal/ColorModal.tsx b/apps/theme/components/ColorModal/ColorModal.tsx
index 2d72c230b3..031b7459eb 100644
--- a/apps/theme/components/ColorModal/ColorModal.tsx
+++ b/apps/theme/components/ColorModal/ColorModal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@digdir/designsystemet-react';
+import { Modal, Paragraph } from '@digdir/designsystemet-react';
 import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
 import { getCssVariable, hexToHSL } from '@digdir/designsystemet/color';
 
@@ -22,8 +22,8 @@ const Field = ({
 }) => {
   return (
     <div className={classes.field}>
-      <div className={classes.label}>{label}</div>
-      <div className={classes.value}>{value}</div>
+      <Paragraph className={classes.label}>{label}</Paragraph>
+      <Paragraph className={classes.value}>{value}</Paragraph>
       {copyBtn && <CopyBtn text={value} />}
     </div>
   );
diff --git a/apps/theme/components/ColorPicker/ColorPicker.module.css b/apps/theme/components/ColorPicker/ColorPicker.module.css
index 65f7d3fccd..99b2207249 100644
--- a/apps/theme/components/ColorPicker/ColorPicker.module.css
+++ b/apps/theme/components/ColorPicker/ColorPicker.module.css
@@ -12,12 +12,14 @@
   height: 48px;
   width: 150px;
   padding-left: 12px;
-  transition: 0.04s all;
+  transition:
+    0.04s border,
+    0.04s outline;
   border: 1px solid #c0c0c0;
   background-color: transparent;
 }
 
-.container:hover {
+.container:hover:not(:focus-visible) {
   border: 1px solid #3d3d3d;
   outline: 1px solid #3d3d3d;
 }
@@ -82,6 +84,8 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  padding: 0;
+  overflow: hidden;
 }
 
 .status svg {
diff --git a/apps/theme/components/ColorPicker/ColorPicker.tsx b/apps/theme/components/ColorPicker/ColorPicker.tsx
index 59ee4684c4..48ca060301 100644
--- a/apps/theme/components/ColorPicker/ColorPicker.tsx
+++ b/apps/theme/components/ColorPicker/ColorPicker.tsx
@@ -25,7 +25,7 @@ export const ColorPicker = ({
   disabled,
   colorError,
 }: ColorPickerProps) => {
-  const [color, setColor] = useState<string>('#0062BA');
+  const [color, setColor] = useState<string>('#FFF');
   const [showModal, setShowModal] = useState(false);
   const handleClick = () => {
     setShowModal(!showModal);
@@ -50,9 +50,10 @@ export const ColorPicker = ({
           variant={colorError === 'none' ? 'default' : 'warning'}
         >
           <Popover.Trigger asChild>
-            <div
+            <button
               className={cl(
                 classes.status,
+                'ds-focus',
                 colorError == 'decorative' && classes.statusYellow,
                 colorError == 'interaction' && classes.statusOrange,
               )}
@@ -66,7 +67,7 @@ export const ColorPicker = ({
               {colorError == 'interaction' && (
                 <ExclamationmarkIcon title='Viktig informasjon om fargen' />
               )}
-            </div>
+            </button>
           </Popover.Trigger>
           <Popover.Content style={{ width: '700px' }}>
             <div>
@@ -106,7 +107,7 @@ export const ColorPicker = ({
           {getStatus()}
         </div>
         <button
-          className={classes.container}
+          className={cl(classes.container, 'ds-focus')}
           onClick={() => handleClick()}
         >
           <div
@@ -118,7 +119,7 @@ export const ColorPicker = ({
       </div>
       <div className={cl(classes.popup, showModal && classes.show)}>
         <ChromePicker
-          onChange={({ hex }: { hex: string }) => {
+          onChangeComplete={({ hex }: { hex: string }) => {
             setColor(hex);
             onColorChanged && onColorChanged(hex as CssColor);
           }}
diff --git a/apps/theme/components/CopyBtn/CopyBtn.tsx b/apps/theme/components/CopyBtn/CopyBtn.tsx
index d612862568..57170fa3fd 100644
--- a/apps/theme/components/CopyBtn/CopyBtn.tsx
+++ b/apps/theme/components/CopyBtn/CopyBtn.tsx
@@ -1,6 +1,6 @@
 import { FilesIcon } from '@navikt/aksel-icons';
 import { useState } from 'react';
-import { Tooltip } from '@digdir/designsystemet-react';
+import { Button, Tooltip } from '@digdir/designsystemet-react';
 
 import classes from './Copybtn.module.css';
 
@@ -16,16 +16,18 @@ export const CopyBtn = ({ text }: CopyBtnProps) => {
       placement='top'
       portal={false}
     >
-      <button
+      <Button
         className={classes.btn}
         onClick={() => {
           setPopupText('Kopiert!');
           void navigator.clipboard.writeText(text);
         }}
+        variant='secondary'
+        size='sm'
         onMouseEnter={() => setPopupText('Kopier')}
       >
         <FilesIcon />
-      </button>
+      </Button>
     </Tooltip>
   );
 };
diff --git a/apps/theme/components/Header/Header.module.css b/apps/theme/components/Header/Header.module.css
index 343926ebe2..aeeec8df2a 100644
--- a/apps/theme/components/Header/Header.module.css
+++ b/apps/theme/components/Header/Header.module.css
@@ -7,19 +7,22 @@
   height: 34px;
 }
 
-.links a {
-  text-decoration: none;
+.item {
+  list-style: none;
+  margin-left: var(--ds-spacing-7);
+}
+
+.link {
   color: inherit;
-  display: block;
-  margin-left: 32px;
-  border-bottom: 2px solid transparent;
-  padding-bottom: 10px;
-  font-size: 18px;
-  letter-spacing: 0.1px;
+  text-decoration: none;
+  border-bottom: 3px solid transparent;
+  padding-bottom: var(--ds-spacing-2);
+  transition: 0.1s border-color ease-out;
 }
 
-.links a:hover {
-  border-color: #d4d4d4;
+.link:hover,
+.link:focus-visible {
+  border-color: var(--ds-color-neutral-border-subtle);
 }
 
 .container {
diff --git a/apps/theme/components/Header/Header.tsx b/apps/theme/components/Header/Header.tsx
index 299a6a947b..6bcf73dc4f 100644
--- a/apps/theme/components/Header/Header.tsx
+++ b/apps/theme/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import cl from 'clsx/lite';
 
 import { Container } from '../Container/Container';
 
@@ -11,7 +12,10 @@ export const Header = () => {
     <header className={classes.header}>
       <Container className={classes.container}>
         <div className={classes.logoContainer}>
-          <Link href='/'>
+          <Link
+            href='/'
+            className='ds-focus'
+          >
             <img
               src='img/logo.svg'
               alt=''
@@ -19,26 +23,44 @@ export const Header = () => {
           </Link>
           <div className={classes.tag}>Beta</div>
         </div>
-        <div className={classes.links}>
-          <Link
-            className={currentPath === '/' ? classes.active : ''}
-            href='/'
-          >
-            Fargevelger
-          </Link>
-          <Link
-            className={currentPath === '/testside' ? classes.active : ''}
-            href='/testside'
-          >
-            Testside
-          </Link>
-          <Link
-            className={currentPath === '/om-verktoyet' ? classes.active : ''}
-            href='/om-verktoyet'
-          >
-            Om verktøyet
-          </Link>
-        </div>
+        <ul className={classes.links}>
+          <li className={classes.item}>
+            <Link
+              className={cl(
+                currentPath === '/' ? classes.active : '',
+                classes.link,
+                'ds-focus',
+              )}
+              href='/'
+            >
+              Fargevelger
+            </Link>
+          </li>
+          <li className={classes.item}>
+            <Link
+              className={cl(
+                currentPath === '/testside' ? classes.active : '',
+                classes.link,
+                'ds-focus',
+              )}
+              href='/testside'
+            >
+              Testside
+            </Link>
+          </li>
+          <li className={classes.item}>
+            <Link
+              className={cl(
+                currentPath === '/om-verktoyet' ? classes.active : '',
+                classes.link,
+                'ds-focus',
+              )}
+              href='/om-verktoyet'
+            >
+              Om verktøyet
+            </Link>
+          </li>
+        </ul>
       </Container>
     </header>
   );
diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
index c1ab09eb06..d0260b37f6 100644
--- a/apps/theme/components/Previews/Previews.module.css
+++ b/apps/theme/components/Previews/Previews.module.css
@@ -19,19 +19,19 @@
   border-radius: 500px;
   border: none;
   background-color: transparent;
+  color: var(--ds-color-accent-text-default);
 }
 
 .menuItem:hover {
   cursor: pointer;
-  background-color: #e1ecff;
+  background-color: var(--ds-color-accent-4);
 }
 
 .menuItemActive {
-  background-color: #e1ecff;
+  background-color: var(--ds-color-accent-3);
 }
 
-.menuItemDisabled,
-.menuItemDisabled:hover {
+.menuItem[aria-disabled] {
   cursor: not-allowed;
   opacity: 0.6;
   background-color: transparent !important;
@@ -53,15 +53,16 @@
   padding: 9px 16px;
   font-size: 15px;
   border-radius: 500px;
+  color: var(--ds-color-accent-text-default);
 }
 
 .toggle:hover {
   cursor: pointer;
-  background-color: #dae7ff;
+  background-color: var(--ds-color-accent-4);
 }
 
 .active {
-  background-color: #d8e6ff;
+  background-color: var(--ds-color-accent-3);
 }
 
 .toggle img {
@@ -72,12 +73,11 @@
   --background: var(--neutral-2);
   --foreground: var(--neutral-1);
 
-  border: 1px solid #ebebeb;
   width: 100%;
   border-radius: 12px;
   display: flex;
   gap: 32px;
-  box-shadow: 0 0 20px 2px #ebebeb;
+  box-shadow: var(--ds-shadow-md);
 }
 
 .preview[data-ds-color-mode='dark'],
diff --git a/apps/theme/components/Previews/Previews.tsx b/apps/theme/components/Previews/Previews.tsx
index c10f0960f6..09f61e9530 100644
--- a/apps/theme/components/Previews/Previews.tsx
+++ b/apps/theme/components/Previews/Previews.tsx
@@ -29,6 +29,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           <button
             className={cl(
               classes.menuItem,
+              'ds-focus',
               previewMode === 'components' && classes.menuItemActive,
             )}
             onClick={() => setPreviewMode('components')}
@@ -38,6 +39,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           <button
             className={cl(
               classes.menuItem,
+              'ds-focus',
               previewMode === 'dashboard' && classes.menuItemActive,
             )}
             onClick={() => setPreviewMode('dashboard')}
@@ -47,27 +49,33 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           <button
             className={cl(
               classes.menuItem,
+              'ds-focus',
               previewMode === 'landing' && classes.menuItemActive,
               classes.menuItemDisabled,
             )}
+            aria-disabled
           >
             Landingsside
           </button>
           <button
             className={cl(
               classes.menuItem,
+              'ds-focus',
               previewMode === 'forms' && classes.menuItemActive,
               classes.menuItemDisabled,
             )}
+            aria-disabled
           >
             Skjemaer
           </button>
           <button
             className={cl(
               classes.menuItem,
+              'ds-focus',
               previewMode === 'auth' && classes.menuItemActive,
               classes.menuItemDisabled,
             )}
+            aria-disabled
           >
             Autentisering
           </button>
@@ -76,6 +84,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           <button
             className={cl(
               classes.toggle,
+              'ds-focus',
               themeMode === 'light' && classes.active,
             )}
             onClick={() => onThemeModeChange('light')}
@@ -89,6 +98,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           <button
             className={cl(
               classes.toggle,
+              'ds-focus',
               themeMode === 'dark' && classes.active,
             )}
             onClick={() => onThemeModeChange('dark')}
@@ -102,6 +112,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           <button
             className={cl(
               classes.toggle,
+              'ds-focus',
               themeMode === 'contrast' && classes.active,
             )}
             onClick={() => onThemeModeChange('contrast')}