WSTEAM1-989: Live Post Share Button #11693

emilysaffron · 2024-06-03T15:19:37Z

Resolves JIRA https://jira.dev.bbc.co.uk/browse/WSTEAM1-989

Overall changes

Adds a Share button for Live page posts.

Code changes

Adds a Share button that uses the Share API with the URL to the current post
Adds logic in stream to determine whether the share buttons should be rendered
Adds functionality to focus on post title when visiting a shared url
Overrides cookie banner force focus behaviour for shared urls
Adds yarn dev-https script to use HTTPS locally via Next.js, as share API is only available in secure contexts, so testing on a local network with IP address will work.
Adds post query param for share link tracking
Adds unit tests

Testing

There are currently some a11y issues, which I haven't managed to find a fix for:

VoiceOver iOS, after exiting share window, VoiceOver takes over focus back to top of page, not respecting forced focus code
Sometimes Webkit browsers don't respect the code that automatically brings focus back to the share button that was clicked after the share prompt is closed, usually happens after tapping 2 or 3 share buttons

Visit a live page
Click share button

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

…1041-SPIKE-Web-Share-API

greenc05 · 2024-07-03T15:01:44Z

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/index.tsx

+    <div ref={viewRef}>
+      <button type="button" ref={focusRef} onClick={handleShare} css={styles}>
+        <ShareSvg />
+        <span>Share</span>


We might need role text around these 2 spans to mitigate text splitting as much as we can

greenc05 · 2024-07-03T15:02:27Z

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/index.tsx

+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"


Missing focusable false

greenc05 · 2024-07-03T15:04:11Z

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/styles.ts

+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    '&:hover, &:focus-visible': {
+      border: `${pixelsToRem(2)}rem solid ${palette.BRAND_BACKGROUND}`,


The focus outline doesn't work in Firefox (I see a dotted line), are we able to use our custom classes we already have for adding the focus indicator?

This isn't to do with this styling, looks like firefox has an override style for type=button. I think we'll need to add type='button' to the custom classes

Or we can remove type button, don't think it's strictly needed here.

It's needed as browsers would treat it as a submit button for a form https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md

Believe that is only if it's wrapped inside a form tag... but cool

Apparently if you don't add it, it's possible that it can destroy the current state of the document https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#notes

I've done this now

greenc05 · 2024-07-03T15:08:12Z

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/styles.ts

+    span: {
+      verticalAlign: 'middle',
+    },
+    svg: {


On hover or focus in Firefox when you change colour preferences (haven't checked WHC) you can't see the icon, are we able to fix this?

I've fixed this, however there seems to be an issue with Firefox and border colour of buttons, when colour overrides are turned on firefox enforces a grey coloured border, I've also tried using outline, and box shadow to override it, however they don't work:

Are you able to apply styling as per the 'submit' button on uploader, that has an outline that looks ok as far as I can tell?

Okay messing around with trial and error, I've managed to get the colour of text to apply to the border. We actually need to fix the border on the submit button, as currently it's set to black and won't adjust to the users colour preference.

Cna you raise a ticket for that please when you are done with this @HarveyPeachey

Yes will do

greenc05 · 2024-07-03T15:12:28Z

src/app/components/ThemeProvider/focusIndicator.ts

@@ -7,7 +7,8 @@ const focusIndicator = ({ palette }: Theme) => css`
  // Adds focus indicator styling to all a and button elements by default.
  a:focus-visible,
  button:focus-visible,
-  button[type='submit']:focus-visible {
+  button[type='submit']:focus-visible,
+  h3:focus-visible {


Do we want this for all h3's across the site?

This should be fine as h3's aren't interactive elements, so they would only be able to be programmatically focused on https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#:~:text=Some%20focusable%20HTML,focus%20navigation%20order).

Ok, was just checking that you meant to do this for all h3s

greenc05 · 2024-07-03T15:12:49Z

src/app/components/ThemeProvider/focusIndicator.ts

@@ -7,7 +7,8 @@ const focusIndicator = ({ palette }: Theme) => css`
  // Adds focus indicator styling to all a and button elements by default.


Comment out of date if adding h3

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/index.tsx

greenc05 · 2024-07-08T11:20:39Z

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/styles.ts

+        backgroundColor: palette.BRAND_BACKGROUND,
+        path: {
+          fill: palette.WHITE,
+          [mq.HIGH_CONTRAST]: {


Is 'mq.HIGH_CONTRAST' forced-colours? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

Yes it is

simorgh/src/app/components/ThemeProvider/mediaQueries.ts

Line 46 in 19cf6ce

export const HIGH_CONTRAST = `@media screen and (forced-colors: active)`;

Great. Would be good if we could rename HIGH_CONTRAST to FORCE_COLOURS across the code base...

greenc05

Thanks very much @HarveyPeachey left a couple of comments

…/bbc/simorgh into WSTEAM1-1041-SPIKE-Web-Share-API

first go at it

0d2c374

emilysaffron self-assigned this Jun 3, 2024

emilysaffron and others added 25 commits June 3, 2024 16:34

fix

8c5849f

remove optional/unused text

ddacd5f

simpler check

17be3f6

even simpler

34170f5

remove query param for now

3ee3744

a11y

6d219dd

type

1498c93

fix type

70c178d

more types

2da683c

fix

d83a342

focus fix

6c25fa4

different focus placement

303fd05

focus fix

bc49dd1

potential workaround

db89869

Merge branch 'latest' of https://github.com/bbc/simorgh into WSTEAM1-…

baef3dc

…1041-SPIKE-Web-Share-API

move share button to seperate component and adds styling

c81632f

adds script to run dev server with https

068203a

adds certificates directory to gitignore

e72eed2

adds share svg with styling

e06cef7

adds styling adjustments

81888c9

adds lint fixes

0e26010

adds styling support for rtl

a36cce8

adds a11y fixes for svg font scaling and svg aria-hidden

f2b357d

adds focus indicator to h3

a17c09a

adjusts styling to target focus-visible

a72556e

HarveyPeachey self-assigned this Jul 2, 2024

HarveyPeachey added 2 commits July 2, 2024 14:37

reverts shared from appearing in breaking news label

be83729

removes redundant code

a93a3f3

greenc05 reviewed Jul 3, 2024

View reviewed changes

HarveyPeachey added 6 commits July 4, 2024 11:32

adds role text to spans

b586b52

adds additional focus indicator selector

5d37875

adds high contrast styling

f4a1faf

adds focusable false to svg

5a4b740

adds vertical alignment styling

3eca206

adds post param for share url ati tracking

e7db173

HarveyPeachey requested review from greenc05, amoore108 and HarveyPeachey July 4, 2024 11:39

amoore108 reviewed Jul 4, 2024

View reviewed changes

ws-nextjs-app/pages/[service]/live/[id]/ShareButton/index.tsx Show resolved Hide resolved

adds ux review changes

5a7b5d4

amoore108 approved these changes Jul 8, 2024

View reviewed changes

Merge branch 'latest' into WSTEAM1-1041-SPIKE-Web-Share-API

3430fbe

shayneahchoon approved these changes Jul 8, 2024

View reviewed changes

Merge branch 'latest' into WSTEAM1-1041-SPIKE-Web-Share-API

9f07e80

greenc05 reviewed Jul 8, 2024

View reviewed changes

HarveyPeachey added 8 commits July 8, 2024 12:27

adds button padding adjustments, border hcm fix, and underline

60dbd8f

Merge branch 'WSTEAM1-1041-SPIKE-Web-Share-API' of https://github.com…

132a752

…/bbc/simorgh into WSTEAM1-1041-SPIKE-Web-Share-API

adds high contrast colour fix

71960da

adds underline styling for just enforced colours

f47654f

removes hardcoded hasShare setter

e2c54cd

updates snapshot

4953d98

adds storybook entry for share button

ca12bfd

Merge branch 'latest' into WSTEAM1-1041-SPIKE-Web-Share-API

7664136

amoore108 approved these changes Jul 10, 2024

View reviewed changes

Merge branch 'latest' into WSTEAM1-1041-SPIKE-Web-Share-API

192e89e

HarveyPeachey merged commit 45159bf into latest Jul 11, 2024
11 checks passed

HarveyPeachey deleted the WSTEAM1-1041-SPIKE-Web-Share-API branch July 11, 2024 09:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WSTEAM1-989: Live Post Share Button #11693

WSTEAM1-989: Live Post Share Button #11693

emilysaffron commented Jun 3, 2024 •

edited by HarveyPeachey

Loading

greenc05 Jul 3, 2024

HarveyPeachey Jul 4, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 4, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 3, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 3, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 4, 2024

HarveyPeachey Jul 4, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 4, 2024

greenc05 Jul 8, 2024

HarveyPeachey Jul 8, 2024

greenc05 Jul 8, 2024

HarveyPeachey Jul 8, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 4, 2024

greenc05 Jul 8, 2024

greenc05 Jul 3, 2024

HarveyPeachey Jul 4, 2024

greenc05 Jul 8, 2024

HarveyPeachey Jul 8, 2024

greenc05 Jul 8, 2024

greenc05 left a comment

		@@ -7,7 +7,8 @@ const focusIndicator = ({ palette }: Theme) => css`
		// Adds focus indicator styling to all a and button elements by default.

WSTEAM1-989: Live Post Share Button #11693

WSTEAM1-989: Live Post Share Button #11693

Conversation

emilysaffron commented Jun 3, 2024 • edited by HarveyPeachey Loading

Overall changes

Code changes

Testing

Helpful Links

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greenc05 left a comment

Choose a reason for hiding this comment

emilysaffron commented Jun 3, 2024 •

edited by HarveyPeachey

Loading