WSTEAM1-TRANSCRIPT-MASTER-BRANCH: Add signpost and transcript components.

[shayneahchoon]

Transcript Experiment

Overall changes

Adds signpost and mini playbutton.

Code changes

• Affects Media Loader, which affects video on newer Article, Media Article Pages.
• Guidance message will not show if the experiment is enabled.

Testing

1. List the steps used to test this PR.

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[greenc05]

UX / visual tweaks

Colours

• Add white background #ffffff to figure.css-1f5b20i (all UX stages)
• Add white background #ffffff to media indicator div.css-fpsnxj (UX stages 1 and 2)

Spacing

• Media indicator - Replicate CSS only from a front page media promo with duration - see styling at breakpoint of 1007px or below - Please make the media indicator look the same as this at all breakpoints e.g we do not need the bigger version at 1008px/desktop
• Figcaption - Adjust margin on element so the left border has a 0.5rem margin to the left of it (ensure this is on all breakpoints)
• Details element - margin top 0
• Summary - padding left and right 0.5rem
• Summary svg - can we align the triangle so it’s at the left edge e.g. so it lines up with the caption border
• Ul padding left and right 0.5rem

Font size

• Can we make sure the transcript time and text is the same size and line height as the article paragraph text

Elements

• Can we add the small element back in at the bottom of the transcript (think we will need to have this) with placeholder text: This transcript was reviewed by a journalist after AI generation.

Green CTA (UX stage 2)

• Green background update to GEL #0E6200 with 0.9 opacity
• Missing hover/focus styling on text ‘Load video’ - Increase border thickness under 'Load video' text as per inline link styling
• Focus indicator should include the plus icon - can we move this span inside the button element please
• @Isabella-Mitchell can we make the focus indicator look better? (Moved to list below)
• Have we used our usual technique for faux block link/button with CSS to make the larger clickable area? See front page promo code. This uses before just inside the link element. Can’t see that here though I maybe looking in the wrong place…

Black No JS CTA
I haven’t pulled the code down as I don’t want to mess up a branch I have checked out

• Please could you check the spacing, text size is the same as the green CTA (spacing defo looks different in the screenshot in the testing doc). Text colour should be white, background colour black with 0.9 opacity.

[greenc05]

UX review

• UX stage 1 to do with Shayne
• UX stage 2 (amends below)
• UX stage 3 (amends below)

Screen reader UX review

• UX stage 1 to do with Shayne
• UX stage 2 (amends below)
• UX stage 3 (amends below)

[greenc05]

Amends please

Transcript small element

• Update padding bottom to 1.5 rem.
• Move to above the ul for transparency
• Update copy: This transcript has been reviewed by a journalist, it was generated with AI (artificial intelligence).

Media indicator (UX stage 1 & 2)

• To match the screen reader UX this should be a paragraph element rather than a span, also please nest a strong tag within the p (this then acts a title for this content when no CSS)
• In the visually hidden text currenlty there is a guidance message should this be there? Lets look at the default placeholder (would of expected a guidance message also to be visually displayed)
• To match the screen reader UX the visually hidden text should be: 'Video, [Video title], Duration 03,11' (as per media promo's on index pages

Green CTA (UX stage 2)

• Add 0.9 opaticy to the green background colour on all breakpoints (currenlty only on the smallest breakpoint)
• The fan SVG has a lot of space within the graphic to the left and right, can we remove this please? (Should help fix the alignment on the smallest breakpoint)
• @Isabella-Mitchell can we make the focus indicator look better when it's around '+ Load video'
• Button: Screen reader UX - We need to add the name of the video you are going to load via visually hidden text e.g. Load video, [video title]
• Button: Screen reader UX - Can we also add aria-describedby from the paragraph before e.g. Help reduce...
• Button: Currently if you hover on the text - the border bottom thickness is increased, we need to show this if you hover anywhere within the media placeholder / anywhere you get the hand cursor (Lets look at the CSS for the default media placeholder to see how we do this)