bbc
WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video
Transcript First Video experiement. No JIRA ticket. Notes to Reviewers
Overall changes
Adds transcript component and updates mediaLoader to allow Transcript First Video experience.
Full testing doc with expected visual changes here
Code changes
Data
- Adds ArticlePage fixture data (for storybook)
Components
- Adds Transcript component
- Adds Sustainability Messaging
- Adds updated media indicator for Transcript First video experience
- Adds updated NoJS message for Transcript First video experience
- Updates placeholder (renders sustainability message if a transcript is provided)
- Updates Media loader (renders transcript and amends caption styling if a transcript is provided)
(Tracking and translations will come in follow up PRs)
Testing
Local test link: http://localhost:7080/mundo/articles/cle16n19nd9o Storybook permalinks & more testing info in this paper doc
Helpful Links
AAC A11y swarm Screen reader UX
UX / visual tweaks
Colours
- [x] Add white background #ffffff to figure.css-1f5b20i (all UX stages)
- [x] Add white background #ffffff to media indicator div.css-fpsnxj (UX stages 1 and 2)
Spacing
- [x] 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
- [x] 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)
- [x] Details element - margin top 0
- [x] Summary - padding left and right 0.5rem
- [x] Summary svg - can we align the triangle so it’s at the left edge e.g. so it lines up with the caption border
- [x] Ul padding left and right 0.5rem
Font size
- [x] Can we make sure the transcript time and text is the same size and line height as the article paragraph text
Elements
- [x] 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)
- [x] Green background update to GEL #0E6200 with 0.9 opacity
- [x] Missing hover/focus styling on text ‘Load video’ - Increase border thickness under 'Load video' text as per inline link styling
- [x] 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)
- [x] 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
- [x] 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.
UX review
- [x] UX stage 1 to do with Shayne
- [x] UX stage 2 (amends below)
- [x] UX stage 3 (amends below)
Screen reader UX review
- [x] UX stage 1 to do with Shayne
- [x] UX stage 2 (amends below)
- [x] UX stage 3 (amends below)
Amends please
Transcript small element
- [x] Update padding bottom to 1.5 rem.
- [x] Move to above the ul for transparency
- [x] Update copy: This transcript has been reviewed by a journalist, it was generated with AI (artificial intelligence).
Media indicator (UX stage 1 & 2)
- [x] 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)
- [x] 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)
- [x] 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)
- [x] Add 0.9 opaticy to the green background colour on all breakpoints (currenlty only on the smallest breakpoint)
- [x] 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)
- [x] @Isabella-Mitchell can we make the focus indicator look better when it's around '+ Load video'
- [x] 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]
- [x] Button: Screen reader UX - Can we also add aria-describedby from the paragraph before e.g. Help reduce...
- [x] 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)
@Isabella-Mitchell next learning day are you able to look at making the focus indicator look better when it's around '+ Load video' please?
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?
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)
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)
Yep - it moves to the player. (Checked on http://localhost.bbc.com:7080/mundo/articles/cle16n19nd9o).
Links for component health
Have added, though not the swarm doc since it's not set up for sharing
Links for component health
Have added, though not the swarm doc since it's not set up for sharing
Can I request that we use Dropbox Paper for the swarm when we do it?
