WSTEAM1-1558: Watch Live Button UX & A11y #12263
Conversation
| display: 'block', // check with UX if we want click area this large | ||
| width: '100%', // check with UX if we want click area this large |
There was a problem hiding this comment.
Makes click area full width of parent element - check with UX
Isabella-Mitchell
changed the title
| @@ -20,7 +21,7 @@ type WarningItem = { | |||
|
|
|||
| type Props = { mediaCollection: MediaCollection[] | null }; | |||
|
|
|||
| const DEFAULT_WATCH__NOW = 'Watch Now'; | |||
| const DEFAULT_WATCH__NOW = 'Watch Live'; | |||
There was a problem hiding this comment.
Changed for consistency with designs
| css({ | ||
| span: { color: palette.GREY_4 }, | ||
| display: 'block', | ||
| width: '100%', | ||
| margin: `${pixelsToRem(12)}rem 0`, | ||
| marginTop: `${spacings.FULL}rem`, |
There was a problem hiding this comment.
Divided 16pixel spacing between this component and outer container to ensure focus indicator does not obscure Live Page header title or description
| {watchNow} | ||
| <Text size="pica" fontVariant="sansBold" as="span"> | ||
| {short} | ||
| </Text>{' '} |
There was a problem hiding this comment.
Is {' '} a space? Can we zap it? If you look when there is no CSS, it's not formatted the best.
There was a problem hiding this comment.
I have changed this. There is still a space after the comma, but the new implementation seems better for no-css and screen reader users.
| @@ -113,6 +113,7 @@ const LiveMediaStream = ({ mediaCollection }: Props) => { | |||
| css={styles.guidanceMessage} | |||
| > | |||
| {warnings.warning_text} | |||
| <VisuallyHiddenText>, </VisuallyHiddenText> | |||
There was a problem hiding this comment.
We don't need this as we have a full stop as part of the guidance message text.
There was a problem hiding this comment.
Ok. do we know whether editorial always provide this as part of the guidance message?
There was a problem hiding this comment.
Well it is a sentence, with proper grammer it should contain one at the end? Do we already have this string in our translations? Could check if so.
There was a problem hiding this comment.
I believe this is coming through in the data (rather than via translation) - have asked Shayne for more clarity.
There was a problem hiding this comment.
Heya, yess this comes through the BFF and is provided by the editors who write the article.
Isabella-Mitchell
merged commit 6ea6abd
into
WSTEAM1-1521-LIVE-VIDEO-FRONT-END
|
Any chance of getting colours for the watch media CTA that meet contrast added please? '#00 8282' for the default and hover teal background colour, with the addition of text underline in white on the 'watch live' text please. |
Resolves JIRA WSTEAM1-1558
Overall changes
Applies UX designs, screen reader UX & A11y AACs to the 'Watch Live' button
(Note - the focus behaviour once button is clicked & 'Close Media' states are being handled in other tickets)
Code changes
Coming in a follow up PR
Optional follow up task (nice to have)
Testing
Storybook component
Storybook component with guidance
Storybook LivePageHeader
Local asset: http://localhost.bbc.com:7081/mundo/live/c7dkx155e626t
Helpful Links
UX Design handoff figma: https://www.figma.com/design/BBLybBx1lceKYgKKGxmiwu/Live-page---Media-streaming-on-header---handoff?node-id=1351-12049&t=mDFKJXQW6CP0A9lo-4
Screen reader UX: https://paper.dropbox.com/doc/WS-Live-page-Screen-reader-UX--Cd_drUzfpS3DH8PtsqpcHWTrAg-8qm1UHDGVMhv5Qj9Q2mbi#:uid=135103855853461974121665&h2=Video-in-Header---No-media-gui
AAC: https://paper.dropbox.com/doc/Media-streaming-on-Live-page-header-Accessibility-Acceptance-Criteria--Cd9XeuiOa~qvgofSxoEXe6jRAg-IJpFNBmz2Anh6JxczSMit
Coding Standards
Repository use guidelines