Merge branch 'padms/1834' into staging

equinor · Nov 20, 2023 · 8ae2d50 · 8ae2d50
2 parents 1036e36 + f8c7f32
commit 8ae2d50
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/sanityv3/schemas/objects/videoFile.tsx b/sanityv3/schemas/objects/videoFile.tsx
@@ -20,6 +20,8 @@ export default {
       name: 'thumbnail',
       type: 'imageWithAlt',
       title: 'Thumbnail',
+      description:
+        'Enter alt text for purely visual video content here. This description assists screen reader users when the video is consistently muted.',
       initialValue: {
         isDecorative: true,
       },

diff --git a/web/components/src/HLSPlayer/index.tsx b/web/components/src/HLSPlayer/index.tsx
@@ -11,6 +11,7 @@ import useVideoAnalytics from '../../../lib/hooks/useVideoAnalytics'
 type HLSProps = Omit<HTMLProps<HTMLVideoElement>, 'src'> & {
   src: string
   playButton?: boolean
+  videoDescription?: string
 }
 
 const Wrapper = styled.div<{ $showSpinner: boolean }>`
@@ -70,6 +71,8 @@ export const HLSPlayer: React.FC<HLSProps> = ({
   controls = false,
   playButton = false,
   autoPlay = false,
+  muted = false,
+  videoDescription,
   ...props
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -134,7 +137,11 @@ export const HLSPlayer: React.FC<HLSProps> = ({
   }, [playButton])
 
   return (
-    <Wrapper $showSpinner={showSpinner}>
+    <Wrapper
+      $showSpinner={showSpinner}
+      role={muted ? 'img' : undefined}
+      aria-label={muted ? videoDescription : undefined}
+    >
       <video
         playsInline
         ref={videoRef}

diff --git a/web/pageComponents/shared/Hero/LoopingVideo.tsx b/web/pageComponents/shared/Hero/LoopingVideo.tsx
@@ -40,7 +40,15 @@ export const LoopingVideo = ({ video }: { video: LoopingVideoData }) => {
   return (
     <Container $aspectRatio={ratio}>
       <StyledFigure>
-        <StyledHLSPlayer loop muted autoPlay title={title} poster={thumbnailURL.src} src={url} />
+        <StyledHLSPlayer
+          loop
+          muted
+          autoPlay
+          title={title}
+          poster={thumbnailURL.src}
+          src={url}
+          videoDescription={thumbnail.alt}
+        />
       </StyledFigure>
     </Container>
   )