MAP fauxHeadline and visuallyHiddenHeadline logic #4582
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 14 commits
November 5, 2019 14:12
pjlee11
requested review from
jamesbhobbs,
dr3,
chris-hinds,
jamesdonoh,
j-pendlebury,
jroebu14 and
sareh
as code owners
Co-Authored-By: Ryan McCombe <ryanmccombe@gmail.com>
…to MAP-hidden-headline-logic
dr3
reviewed
Nov 7, 2019
| const FauxHeadlineContainer = ({ blocks }) => { | ||
| const { script, service } = useContext(ServiceContext); | ||
|
|
||
| const arrayOfFragments = blocks[0].model.blocks[0].model.blocks; |
dr3
reviewed
Nov 7, 2019
| }); | ||
|
|
||
| describe('with headline data', () => { | ||
| const data = { |
There was a problem hiding this comment.
const data = textBlock('This is a headline!');
chris-hinds
approved these changes
Nov 12, 2019
|
MAPs are not live yet, and we're going to do an a11y swarm before they are, so doesn't seem worthwhile holding this PR up for that |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #4403
Further context: #4150
Related PR: BBC-archive/psammead#2575
Overall change: Explicitly creates seperate blocks
fauxHeadlineandvisuallyHiddenHeadlinefor the MAP pages to allow the Headline to be displayed under the AV content while maintaining the semantic use of<h1>for a11y best practices.Code changes:
fauxHeadlineandvisuallyHiddenHeadlineblocksfauxHeadlineandvisuallyHiddenHeadline<h1>using theVisuallyHiddenTextpsammead component and renders it above thevideoblock for semantic HTML purposes and a11y best practices<strong>element using theHeadlinepsammead component and renders it below thevideoblock for improved UX visual treatment, this is hasaria-hiddenso it is ignored in the terms of a11yCYPRESS_APP_ENV=local CYPRESS_SMOKE=false npm run test:e2e:interactive)Testing notes:
As this could severely affect a11y concerns (EG: screen reader users, navigation by heading, etc) we need to test all a11y tools to ensure no regression in behaviour.