WS 869 - Align WS bylines with PS

[Isabella-Mitchell]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-869

Summary

Align WS bylines (AMP + canonical) with PS plans

Code changes

• Updates JSX and CSS to make bylines match PS designs (figma)
  -- renders "horizontally"
  -- changes to hover/ focus styles
  -- does not render images for multiple contributors
  -- does not render twitter handles
• Keeps semantic HTML unchanged (nested unordered lists)
• Correctly attributes authorTopicUrls
• Permits 'byline' or 'subByline' block types
• Updates/ adds unit tests

Not done as part of this work

• Change layout for single contributor with image (will raise a ticket)
• Match PS visually hidden text and use of 'and' (will check with product since I believe we require translations)
• Permit multiple bylines/ subBylines like PS do (WS do not do this, and changing this is out of scope of this work)

Developer Checklist

• UX
  • UX Criteria met (visual UX & screenreader UX)
• Accessibility
  • Accessibility Acceptance Criteria met
  • Accessibility swarm completed
  • Component Health updated
  • P1 accessibility bugs resolved
  • P2/P3 accessibility bugs planned (if not resolved)
• Security
  • Security issues addressed
  • Threat Model updated
• Documentation
  • Docs updated (runbook, READMEs)
• Testing
  • Feature tested on relevant environments
• Comms
  • Relevant parties notified of changes

Testing

• Manual Testing required?
  • Local (Ready-For-Test, Local)
  • Test (Ready-For-Test, Test)
  • Preview (Ready-For-Test, Preview)
  • Live (Ready-For-Test, Live)
• Manual Testing complete?
  • Local
  • Test
  • Preview
  • Live

Additional Testing Steps

See these testing links

Useful Links

• Coding Standards
• Repository use guidelines
  Figma file designs
  PS A11y AACs on the ticket
  Old WS Screen Reader UX
  Screen Reader UX & AACs for A11y Swarm are still WIP

[Isabella-Mitchell]

I'm not sure if I should do this due to Script Sizes. The benefit is that gives a bit more breathing room on latin languages (e.g. News, Mundo). And if I look at a service with a larger script (e.g. Sinhala), then I can see the default service line height overwrites this. The negative is that the designs only account for latin designs.