Transcript Front End #11707
Transcript Front End #11707
Conversation
src/app/components/Transcript/TranscriptTimestamp/index.styles.tsx
Outdated
Show resolved
Hide resolved
Isabella-Mitchell
changed the title
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Have done a couple of tests, the time element is what's creating the text splitting on Talkback. While a time element is semantially correct for the type of content, in the real world it's not adding any semantic value for screen reader output, until we are aware of a real world user use case for this element, lets swap the time element for a span? Shall we write a comment to say that we aren't using the correct semantic element here e.g. time element becauses it results in text splitting on Talkback. Note role text is needed for VoiceOver in iOS. Note my tests where without any CSS (also works fine on Jaws, NVDA and VoiceOver Mac), I will test again once you have made the change. |
| const transcriptBlock = getTranscriptBlock(blocks); | ||
| const hasTranscript = !!transcriptBlock; | ||
|
|
||
| if (isLite && !hasTranscript) return null; |
There was a problem hiding this comment.
To do: add tests & remove comment
|
Making a new PR pointed at #11970 |
1 similar comment
|
Making a new PR pointed at #11970 |
Resolves JIRA [number]
Overall changes
Working towards a Transcript first video prototype
Code changes
Note the transcript used in the test asset is still just fixture data and not the final video transcript.
Testing
Light UI
Dark UI
Run locally and visit local fixture data: http://localhost:7080/mundo/articles/ce42wzqr2mko
Once hooked up to back end PR - can visit: http://localhost:7080/mundo/articles/cle16n19nd9o?renderer_env=test
Helpful Links
Screen Reader UX & Designs
A11y AAC & Translations
Coding Standards
Repository use guidelines