Merge pull request #12263 from bbc/WSTEAM1-1558-watch-live-ux-a11y

WSTEAM1-1558: Watch Live Button UX & A11y
bbc · Jan 10, 2025 · 6ea6abd · 6ea6abd
2 parents fa561e6 + 870c2b1
commit 6ea6abd
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 35 deletions.
diff --git a/src/app/components/LiveMediaStream/index.styles.tsx b/src/app/components/LiveMediaStream/index.styles.tsx
@@ -4,10 +4,21 @@ import { css, Theme } from '@emotion/react';
 export default {
   componentContainer: ({ spacings }: Theme) =>
     css({
-      margin: `${spacings.FULL}rem 0`,
       width: '100%',
+      marginTop: `${spacings.FULL}rem`,
     }),
-  playButtonText: ({ spacings, palette }: Theme) =>
+  mediaButton: ({ mq }: Theme) =>
+    css({
+      cursor: 'pointer',
+      backgroundColor: 'unset',
+      border: 'unset',
+      textAlign: 'start',
+      padding: 0,
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+      },
+    }),
+  watchLiveCTAText: ({ spacings, palette }: Theme) =>
     css({
       color: palette.WHITE,
       display: 'flex',
@@ -29,22 +40,30 @@ export default {
     }),
   guidanceMessage: ({ palette, spacings }: Theme) =>
     css({
+      display: 'block',
       margin: `${spacings.FULL}rem 0 `,
-      color: palette.WHITE,
+      color: palette.GREY_2,
     }),
-  playButton: ({ palette, mq }: Theme) =>
+  watchLiveCTA: ({ palette, mq, spacings }: Theme) =>
     css({
-      cursor: 'pointer',
       width: `${pixelsToRem(171)}rem`,
       border: 0,
       backgroundColor: palette.LIVE_CORE,
       padding: `${pixelsToRem(11)}rem`,
-      '&:hover': {
-        backgroundColor: palette.LIVE_DARK,
-      },
+      marginTop: `${spacings.DOUBLE}rem`,
       [mq.GROUP_2_MAX_WIDTH]: {
         width: '100%',
       },
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+        border: `${pixelsToRem(2)}rem solid canvasText`,
+      },
+      'button:hover &, button:focus &': {
+        backgroundColor: palette.LIVE_DARK,
+        [mq.FORCED_COLOURS]: {
+          textDecoration: 'underline',
+        },
+      },
     }),
   liveMediaStreamText: ({ palette }: Theme) =>
     css({
@@ -84,12 +103,15 @@ export default {
     css({
       maxWidth: '100%',
     }),
-  mediaDescription: ({ palette }: Theme) =>
+  mediaDescription: ({ palette, spacings }: Theme) =>
     css({
       span: { color: palette.GREY_4 },
       display: 'block',
       width: '100%',
-      margin: `${pixelsToRem(12)}rem 0`,
+      marginTop: `${spacings.FULL}rem`,
+      'button:hover & span, button:focus & span': {
+        textDecoration: 'underline',
+      },
     }),
   mediaDescriptionGuidance: ({ spacings }: Theme) =>
     css({

diff --git a/src/app/components/LiveMediaStream/index.tsx b/src/app/components/LiveMediaStream/index.tsx
@@ -9,6 +9,7 @@ import { ServiceContext } from '#app/contexts/ServiceContext';
 import { RequestContext } from '#app/contexts/RequestContext';
 import styles from './index.styles';
 import WARNING_LEVELS from '../MediaLoader/configs/warningLevels';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 import { Close, PlayIcon } from '../icons';
 
 type WarningItem = {
@@ -20,7 +21,7 @@ type WarningItem = {
 
 type Props = { mediaCollection: MediaCollection[] | null };
 
-const DEFAULT_WATCH__NOW = 'Watch Now';
+const DEFAULT_WATCH__NOW = 'Watch Live';
 
 const MemoizedMediaPlayer = memo(MediaLoader);
 
@@ -35,7 +36,7 @@ const LiveMediaStream = ({ mediaCollection }: Props) => {
   }
 
   const {
-    media: { watchNow = DEFAULT_WATCH__NOW },
+    media: { watch = DEFAULT_WATCH__NOW },
   } = translations;
 
   const mediaItem = filterForBlockType(mediaCollection, 'liveMedia');
@@ -80,38 +81,53 @@ const LiveMediaStream = ({ mediaCollection }: Props) => {
 
   return (
     <div css={styles.componentContainer}>
-      <p
-        css={[
-          styles.mediaDescription,
-          warnings && styles.mediaDescriptionGuidance,
-        ]}
-      >
-        <Text size="pica" fontVariant="sansBold" as="span">
-          {short}
-        </Text>{' '}
-        <Text size="pica" fontVariant="sansRegular" as="span">
-          {networkName}
-        </Text>
-      </p>
-      {warnings && (
-        <Text as="p" css={styles.guidanceMessage}>
-          {warnings.warning_text}
-        </Text>
-      )}
       <button
         type="button"
         onClick={() => handleClick()}
         data-testid="watch-now-button"
-        css={[showMedia ? styles.hideComponent : styles.playButton]}
+        css={styles.mediaButton}
       >
         <Text
-          css={styles.playButtonText}
-          size="greatPrimer"
+          size="pica"
           fontVariant="sansBold"
+          as="span"
+          css={[
+            styles.mediaDescription,
+            warnings && styles.mediaDescriptionGuidance,
+          ]}
+          className="hoverStylesText"
         >
-          <PlayIcon />
-          {watchNow}
+          <Text size="pica" fontVariant="sansBold" as="span">
+            {short},{' '}
+          </Text>
+          <Text size="pica" fontVariant="sansRegular" as="span">
+            {networkName}
+          </Text>
         </Text>
+        {warnings && (
+          <Text
+            as="span"
+            size="brevier"
+            fontVariant="sansRegular"
+            css={styles.guidanceMessage}
+          >
+            {warnings.warning_text}
+            <VisuallyHiddenText>, </VisuallyHiddenText>
+          </Text>
+        )}
+        <div
+          className="hoverStylesCTA"
+          css={[showMedia ? styles.hideComponent : styles.watchLiveCTA]}
+        >
+          <Text
+            css={styles.watchLiveCTAText}
+            size="greatPrimer"
+            fontVariant="sansBold"
+          >
+            <PlayIcon />
+            {watch}
+          </Text>
+        </div>
       </button>
       <div css={[showMedia ? styles.liveMediaSpan : styles.hideComponent]}>
         <p css={styles.mediaDescription}>

diff --git a/src/app/components/icons/index.tsx b/src/app/components/icons/index.tsx
@@ -149,6 +149,8 @@ export const PlayIcon = ({ className }: { className?: string }) => (
     width="12"
     height="12"
     className={className}
+    focusable="false"
+    aria-hidden="true"
   >
     <path d="M29 16 5.8 1v30z" />
   </svg>

diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.stories.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.stories.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import mundoLiveFixture from '#data/mundo/live/c7dkx155e626t.json';
+import { MediaCollection } from '#app/components/MediaLoader/types';
 import Header from '.';
 import metadata from './metadata.json';
 
@@ -9,6 +11,7 @@ interface ComponentProps {
   imageUrl?: string;
   imageUrlTemplate?: string;
   imageWidth?: number;
+  mediaCollections?: MediaCollection[] | null;
 }
 
 const Component = ({
@@ -18,6 +21,7 @@ const Component = ({
   imageUrl,
   imageUrlTemplate,
   imageWidth,
+  mediaCollections,
 }: ComponentProps) => {
   return (
     <Header
@@ -27,6 +31,7 @@ const Component = ({
       imageUrl={imageUrl}
       imageUrlTemplate={imageUrlTemplate}
       imageWidth={imageWidth}
+      mediaCollections={mediaCollections}
     />
   );
 };
@@ -133,3 +138,17 @@ export const TitleAndDescriptionWithLiveLabelAndImageExtraLongText = () => (
     imageWidth={660}
   />
 );
+
+export const WithLiveMediaStream = () => (
+  <Component
+    title="An kai wa jirgin kwashe yan Turkiyya hari a Sudan"
+    showLiveLabel
+    description="Wannan shaft ne da ke kawo muku laqbarai daga sassan duniya daban-daban"
+    imageUrl="https://ichef.bbci.co.uk/ace/standard/480/cpsdevpb/1d5b/test/5f969ec0-c4d8-11ed-8319-9b394d8ed0dd.jpg"
+    imageUrlTemplate="https://ichef.bbci.co.uk/ace/standard/{width}/cpsdevpb/1d5b/test/5f969ec0-c4d8-11ed-8319-9b394d8ed0dd.jpg"
+    imageWidth={660}
+    mediaCollections={
+      mundoLiveFixture.data.mediaCollections as MediaCollection[]
+    }
+  />
+);