storefront focus and header

digdir · Jun 24, 2024 · 0c717e8 · 0c717e8
1 parent d69f314
commit 0c717e8
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/apps/storefront/components/Footer/Footer.module.css b/apps/storefront/components/Footer/Footer.module.css
@@ -60,7 +60,6 @@
   padding: 0 var(--ds-spacing-5);
   margin-top: var(--ds-spacing-7);
   border-radius: 2px;
-  transition: 0.1s all;
   color: var(--color-text-on_inverted-subtle);
   border: 1px dashed var(--color-text-on_inverted-subtle);
 }

diff --git a/apps/storefront/components/Footer/Footer.tsx b/apps/storefront/components/Footer/Footer.tsx
@@ -134,7 +134,11 @@ const Footer = () => {
             </div>
             <NextLink
               href='mailto:[email protected]'
-              className={cl(classes.button, 'ds-paragraph-short--sm')}
+              className={cl(
+                classes.button,
+                'ds-paragraph-short--sm',
+                'ds-focus',
+              )}
             >
               Din etat? Ta kontakt!
             </NextLink>

diff --git a/apps/storefront/components/Header/Header.module.css b/apps/storefront/components/Header/Header.module.css
@@ -47,10 +47,11 @@
   text-decoration: none;
   border-bottom: 3px solid transparent;
   padding-bottom: var(--ds-spacing-2);
-  transition: 0.1s all ease-out;
+  transition: 0.1s border-color ease-out;
 }
 
-.link:hover {
+.link:hover,
+.link:focus-visible {
   border-color: var(--ds-color-neutral-border-subtle);
 }
 

diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx
@@ -86,13 +86,15 @@ const Header = () => {
                 key={index}
               >
                 <Link
+                  suppressHydrationWarning
                   href={item.url}
                   onClick={() => setOpen(false)}
                   prefetch={false}
                   className={cl(
-                    href === item.url ? classes.active : '',
+                    item.url.includes(href) && classes.active,
                     classes.link,
                     'ds-paragraph--md',
+                    'ds-focus',
                   )}
                 >
                   {item.name}