Add Dark UI support for Topic Discovery Experience on supported Dark UI page types

[pvaliani]

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

Summary

• Adds dark UI support for Topic Discovery when it appears on pages that already support dark UI in Simorgh

• The change keeps the existing dark UI rules unchanged.

• Topic Discovery now uses the correct link colours when it is rendered on supported dark UI page types such as media article, TV and live TV pages.

Before darkUI implemented Topic Discovery looked like this:

Code changes

• See files changed

Testing

1. Request http://localhost.bbc.com:7081/hausa/articles/c621qw803p6o?renderer_env=live

See Topic Discovery on MAP below as an example

Note: the promo in this image in position 1 is NOT a Live promo, it was forced to show the Live label to demonstrate that colour contrast is adequate and as expected.

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[HarveyPeachey]

Does that live label in the after screenshot meet a11y colour contrast? Looks quite dark to me, but that might be my colour blindness

[pvaliani]

Does that live label in the after screenshot meet a11y colour contrast? Looks quite dark to me, but that might be my colour blindness

It looked darker to me too but from the other example I looked at yday I presumed it was acceptable. Thought it pulled acceptable contrast via the existing theme. Do you perhaps have a different example link I can check against? thanks for flagging!

[HarveyPeachey]

It looked darker to me too but from the other example I looked at yday I presumed it was acceptable. Thought it pulled acceptable contrast via the existing theme. Do you perhaps have a different example link I can check against? thanks for flagging!

I don't but I just used a colour grabber for that screenshot and inputted them into the web aim colour contrast checker, and it fails all WCAG standards https://webaim.org/resources/contrastchecker/?fcolor=255050&bcolor=141414

[pvaliani]

The pulse icon was already using the lighter live colour on dark UI, but the live label text was still using the darker live colour. I think i'm gonna update the shared LiveText styling so dark UI uses LIVE_LIGHT and light UI keeps LIVE_DARK. How does that sound? Annoyingly that Live promo is gone now from the article

[pvaliani]

@HarveyPeachey @LilyL0u updates applied

I actually scoped the live label contrast fix to CurationPromo only, rather than changing the shared LiveText component globally.

Live promos in curation grids now use LIVE_LIGHT on dark UI and keep LIVE_DARK on light UI. Posted an updated image in the PR description because I had to force a promo to be Live locally with an override for this fixture so that you can see the change visually. If all good pls bless with the green tick

[holchris]

Hia, according to the figma designs the play button on a promo in the topic discovery component should be black with white text, currently it is white with black text

[pvaliani]

Hia, according to the figma designs the play button on a promo in the topic discovery component should be black with white text, currently it is white with black text

Sorted in latest update, good spot! Thank you

[holchris]

One more stying thing, on the designs the grey line under the Topic Tags should only be on 600px and above. It it currently on the breakpoints below

[pvaliani]

One more stying thing, on the designs the grey line under the Topic Tags should only be on 600px and above. It it currently on the breakpoints below

Fixed, thanks! Have a wee check pls