chore(storefront): Fix wcag issues on front page (#1933)

digdir · May 13, 2024 · b5cada6 · b5cada6
1 parent e3534a8
commit b5cada6
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 11 deletions.
diff --git a/apps/storefront/components/Blog/Card/BlogCard.tsx b/apps/storefront/components/Blog/Card/BlogCard.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import { Card, Heading, Paragraph, Tag } from '@digdir/designsystemet-react';
 import Link from 'next/link';
 import cl from 'clsx';
@@ -14,6 +15,7 @@ type BlogCardProps = {
   featured?: boolean;
   tagText?: string;
   tagColor?: 'first' | 'second' | 'third';
+  level?: 2 | 3;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>;
 
 export const BlogCard = ({
@@ -27,6 +29,7 @@ export const BlogCard = ({
   className,
   tagText,
   tagColor,
+  level = 3,
   ...props
 }: BlogCardProps) => {
   return (
@@ -41,7 +44,7 @@ export const BlogCard = ({
         <Card.Media className={classes.media}>
           <img
             src={image}
-            alt={title}
+            alt=''
             className={classes.image}
           />
         </Card.Media>
@@ -56,7 +59,12 @@ export const BlogCard = ({
                 {tagText}
               </Tag>
             )}
-            <Heading size={featured ? 'large' : 'small'}>{title}</Heading>
+            <Heading
+              level={level}
+              size={featured ? 'large' : 'small'}
+            >
+              {title}
+            </Heading>
           </Card.Header>
           <Card.Content>
             <Paragraph size={featured ? 'large' : 'small'}>{desc}</Paragraph>

diff --git a/apps/storefront/components/ImageBanner/ImageBanner.tsx b/apps/storefront/components/ImageBanner/ImageBanner.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import type React from 'react';
 import { useEffect, useState, createElement } from 'react';
 import cn from 'clsx';
@@ -69,14 +70,19 @@ const ImageBanner = ({
             {videoSrc && (
               <video
                 autoPlay
+                playsInline
                 muted
                 loop
                 className={classes.video}
               >
                 <source
-                  src={videoSrc}
+                  src={videoSrc + '.webm'}
+                  type='video/webm'
+                />
+                <source
+                  src={videoSrc + '.mp4'}
                   type='video/mp4'
-                ></source>
+                />
               </video>
             )}
             {imgSrc && (
@@ -131,14 +137,19 @@ const ImageBanner = ({
             {videoSrc && (
               <video
                 autoPlay
+                playsInline
                 muted
                 loop
                 className={classes.video}
               >
                 <source
-                  src={videoSrc}
+                  src={videoSrc + '.webm'}
+                  type='video/webm'
+                />
+                <source
+                  src={videoSrc + '.mp4'}
                   type='video/mp4'
-                ></source>
+                />
               </video>
             )}
             {imgSrc && (

diff --git a/apps/storefront/components/NavigationCard/NavigationCard.tsx b/apps/storefront/components/NavigationCard/NavigationCard.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import cl from 'clsx';
 import type * as React from 'react';
+import { Heading } from '@digdir/designsystemet-react';
 
 import classes from './NavigationCard.module.css';
 
@@ -11,6 +12,7 @@ export interface NavigationCardProps {
   backgroundColor?: 'white' | 'grey';
   description?: string;
   url?: string;
+  level?: 2 | 3;
 }
 
 const NavigationCard = ({
@@ -20,6 +22,7 @@ const NavigationCard = ({
   backgroundColor = 'white',
   description,
   url = '/grunnleggende/design-tokens',
+  level = 3,
 }: NavigationCardProps) => {
   return (
     <Link
@@ -28,7 +31,12 @@ const NavigationCard = ({
       className={cl(classes.card, classes[backgroundColor])}
     >
       <div className={cl(classes.iconContainer, classes[color])}>{icon}</div>
-      <h3 className={classes.title}>{title}</h3>
+      <Heading
+        level={level}
+        className={classes.title}
+      >
+        {title}
+      </Heading>
       <div className={classes.desc}>{description}</div>
     </Link>
   );

diff --git a/apps/storefront/components/Section/Section.tsx b/apps/storefront/components/Section/Section.tsx
@@ -26,7 +26,7 @@ const Section = ({
         <div className={classes.header}>
           {title && (
             <Heading
-              levle={2}
+              level={2}
               size='medium'
             >
               {title}

diff --git a/apps/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx b/apps/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import type React from 'react';
 import { Heading } from '@digdir/designsystemet-react';
 import { PaletteIcon, WrenchIcon, ComponentIcon } from '@navikt/aksel-icons';
@@ -85,6 +86,7 @@ const FrontpageLayout = ({ content }: FrontpageLayoutProps) => {
                 color='blue'
                 url='/grunnleggende/for-designere/kom-i-gang'
                 icon={<PaletteIcon fontSize={36} />}
+                level={2}
               ></NavigationCard>
 
               <NavigationCard
@@ -93,6 +95,7 @@ const FrontpageLayout = ({ content }: FrontpageLayoutProps) => {
                 color='yellow'
                 url='/grunnleggende/for-utviklere/kom-i-gang'
                 icon={<WrenchIcon fontSize={36} />}
+                level={2}
               ></NavigationCard>
 
               <NavigationCard
@@ -101,6 +104,7 @@ const FrontpageLayout = ({ content }: FrontpageLayoutProps) => {
                 color='red'
                 url='/komponenter'
                 icon={<ComponentIcon fontSize={34} />}
+                level={2}
               ></NavigationCard>
             </div>
           </Container>

diff --git a/apps/storefront/pages/bloggen/index.mdx b/apps/storefront/pages/bloggen/index.mdx
@@ -37,7 +37,8 @@ export default ({ children }) => (
   href='/bloggen/2024/fluid-typography'
   image='/img/bloggen/fluid-front.png'
   author='Designsystemet'
-  featured={false}
+  featured={true}
+  level={2}
 />
 
 <BlogCard
@@ -48,6 +49,7 @@ export default ({ children }) => (
   image='/img/bloggen/altinnstudio-16-9.png'
   author='Altinn / David Øvrelid'
   featured={false}
+  level={2}
 />
 
 <BlogCard
@@ -58,6 +60,7 @@ export default ({ children }) => (
   image='/img/bloggen/miro.png'
   author='Digdir og Brønnøysundregistrene'
   featured={false}
+  level={2}
 />
 
 <style>

diff --git a/apps/storefront/pages/index.mdx b/apps/storefront/pages/index.mdx
@@ -31,7 +31,7 @@ export default ({ children }) => <FrontpageLayout content={children} />;
 <ImageBanner
   title='Tilgjengelige og fleksible komponenter'
   description='Når vi lager de mest grunnleggende komponentene bare én gang, sikrer vi god kvalitet. Komponenten blir godt testet, og vi ivaretar kravene til tilgjengelighet. Komponentene er laget i Figma og i React. Du kan sette dem sammen på mange ulike måter og i forskjellige mønstre. '
-  videoSrc='/animations/Page.webm'
+  videoSrc='/animations/Page'
   imgPosition='right'
   headingLevel='h2'
   imgWidth={1195}
@@ -43,7 +43,7 @@ export default ({ children }) => <FrontpageLayout content={children} />;
 <ImageBanner
   title='Bruk egne tema'
   description='Designsystemet støtter ulike identiteter gjennom tema. På denne måten kan alle ta utgangspunkt i samme designsystem, men tilpasse til ulike avsenderidentiteter.'
-  videoSrc='/animations/Theme.webm'
+  videoSrc='/animations/Theme'
   headingLevel='h2'
   imgWidth={1195}
   imgHeight={270}