WSTEAM1-446: Live Page Header - Title & Description UX

[Isabella-Mitchell]

Resolves JIRA WSTEAM1-446

Overall changes

• Add UX styling and A11y to Live Page Header
• Note this PR only covers the Title and (optional) Description fields and (optional) live label (without SVG/ pulse).

Code changes

• Create Header component with styles.
• Add Header component to Storybook
• Add unit tests
• Add new colours that are missing from our ThemeProvider

Notes for follow up PRs

• I have used CSS Grid and media queries to manage the layout. The following should be added to the css styles of the 'Last updated...' timestamp to make it line up beneath the description on larger device sizes.
  [mq.GROUP_4_MIN_WIDTH]: {
  gridColumn: '5 / span 8',
  },
  Alternatively, they can apply the layoutWithLiveLabel css

Testing

• Check all unit tests pass
• A11y swarm to be completed once the Live Label ticket has been code reviewed and promoted on the BFF/ merged into this branch.
• I have checked with Android TalkBack (to confirm this Talkback bug doesn't happen with spans nested in the Heading component), iPhone voiceover and Mac voiceover.

Storybook Preview links:

• Title and live label (LTR)
• Title and description and live label (LTR)
• Title and description and live label (RTL)
• Title without live label (LTR)
• Title and description without live label (LTR)
• Title and description without live label (RTL)
• (All designs inc the 'select a service' toggle on the right hand side)

Helpful Links

Screen Reader UX - https://paper.dropbox.com/doc/WS-Live-page-Screen-reader-UX--B6TFvTNBwrjdQ20dOGXf0inXAg-8qm1UHDGVMhv5Qj9Q2mbi
Live page Accessibility Acceptance Criteria https://paper.dropbox.com/doc/Live-page-Accessibility-Acceptance-Criteria--B6SIWyI1GdxqKC5Me1s1rQCZAg-KZQODmAf9tvodUlxsAVnA
Designs - https://www.figma.com/file/ozHsWG5R9tETw6lBOU740V/Live-mvp-header---handover?type=design&node-id=402-36825

Coding Standards

Repository use guidelines

[amoore108]

Looks great, nice job!

[greenc05]

Impeccable as usual @Isabella-Mitchell 😄