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. local test link: http://localhost:7080/mundo/articles/ce42wzqr2mko

Helpful Links

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

Coding Standards

Repository use guidelines

Future work after trail

• Display media guidance message if required

[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)

[greenc05]

@Isabella-Mitchell next learning day are you able to look at making the focus indicator look better when it's around '+ Load video' please?

[Isabella-Mitchell]

Amends please
...

• @Isabella-Mitchell can we make the focus indicator look better when it's around '+ Load video'

I've updated this to use the inverted focus indicator. Is this ok?

[greenc05]

Links for component health

• AAC
• A11y swarm
• Screen reader UX

[greenc05]

Question: On your local env, when you press TAB on the keyboard to move focus to 'Load video' where does focus go after this link is actioned? Does it move to the player? (Hard to tell on storybook - seems to be ok e.g. it doesn't go to the top of the page)