WS-2323 - Add Language Script Switch Button to New Navigation Dual Script Language Services [Do Not Merge] by pvaliani · Pull Request #13881 · bbc/simorgh

pvaliani · 2026-04-07T09:14:24Z

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

Summary

Adds the language script switching button support to the new Navigation bar for serbian, ukchina (articles only), zhongwen and uzbek
Script switch button has been refreshed according to updated UX designs
Adds minimal additional test coverage and updates snapshots

Code changes

See files changed

Testing

Run Simorgh and navigate to http://localhost:7081/ukchina/simp/articles/c0e8weny66ko adjusting breakpoints will show the script switch button at different layouts on an article
Do the same for http://localhost:7081/serbian/articles/c0708p54p73o/lat or other service home pages to see the new navigation script switch button

Useful Links

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

… group 0

Copilot

Pull request overview

This PR adds/updates support for the language script switch button in the header when using the new Navigation, expanding it to additional dual-script services (including ukchina on article pages only) and refreshing the button styling to match updated UX designs.

Changes:

Enabled new Navigation for additional services (serbian, ukchina, uzbek, zhongwen) and updated header logic to handle ukchina “articles only”.
Updated ScriptLink to support new-navigation styling via a prop and added/updated snapshots/tests.
Adjusted legacy header brand styling to accommodate script switch layout when using the new Navigation.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/app/legacy/containers/Header/index.test.jsx	Adds assertions for ukchina script-link rendering on article vs home pages.
src/app/legacy/containers/Header/index.styles.ts	Updates header brand styles to better lay out brand + script link for new nav.
src/app/legacy/containers/Header/index.jsx	Adds ukchina page-type gating for new nav; passes new-nav flag to `ScriptLink`.
src/app/components/Navigation/config.ts	Adds additional services to the “new nav” allowlist.
src/app/components/Header/ScriptLink/index.tsx	Adds `isNewNavigation` prop and conditionally applies new styling.
src/app/components/Header/ScriptLink/index.test.tsx	Adds a snapshot test for new-navigation styling.
src/app/components/Header/ScriptLink/index.styles.ts	Introduces updated UX styles for script switch button in new nav.
src/app/components/Header/ScriptLink/snapshots/index.test.tsx.snap	Updates snapshots for the new-navigation ScriptLink rendering.

Copilot · 2026-04-08T07:33:21Z

src/app/components/Navigation/config.ts

+  'serbian',
  'tamil',
  'telugu',
+  'ukchina',
  'urdu',


SERVICES_WITH_NEW_NAV now includes ukchina, but HeaderContainer explicitly disables the new nav for ukchina non-article pages. This means the constant no longer reliably represents “services that use the new nav”, yet it’s also used elsewhere (e.g. to set useNewNav=true when fetching navigation config). Consider refactoring to a shared predicate (e.g. shouldUseNewNav({ service, pageType, pagePath })) or splitting into separate lists so ukchina can remain “articles only” without affecting other consumers.

The change is only for articles on ukchina.

Copilot · 2026-04-08T07:33:22Z

src/app/components/Header/ScriptLink/index.tsx

  const currentVariantIndex = pathPartsWithoutExtension.indexOf(
    currentVariant as string,
  );

  pathPartsWithoutExtension[currentVariantIndex] = alternateVariant;


currentVariant can be null in RequestContext, and indexOf will return -1 if the variant segment isn’t present in the URL. In that case pathPartsWithoutExtension[currentVariantIndex] = alternateVariant writes to index -1 and the joined path won’t change, producing an incorrect href (no variant switch). Add a guard for currentVariantIndex < 0 (e.g. return null or derive the replacement segment more defensively).

src/app/legacy/containers/Header/index.jsx

amoore108 · 2026-04-08T09:23:25Z

src/app/components/Navigation/config.ts

  'bengali',
  'marathi',
  'punjabi',
+  'serbian',


We'll need to remove these services before merging so that we don't release the new nav to them early.

Yeah got a subtask for that in https://bbc.atlassian.net/jira/software/c/projects/WS/boards/1251?selectedIssue=WS-2487

(just as a reminder to remove, i'll fix the conflicts once it's gone to preview and been swarmed)

…switching-new-navigation

src/app/components/Header/ScriptLink/index.tsx

src/app/legacy/containers/Header/index.styles.ts

amoore108 · 2026-04-09T07:28:04Z

Thanks for the changes, it looks good 👍

The only thing I can see different to the existing behaviour is on smaller screens for the likes of Serbian. Here, the button pushes against the SVG for quite some time before it snaps on to the new line, whereas with the existing/old behaviour, the SVG gets smaller and smaller, leaving a gap between it and the button and then finally snaps onto a new line. Worth checking with UX on the expectation here?

pvaliani · 2026-04-09T07:55:24Z

Thanks for the changes, it looks good 👍

The only thing I can see different to the existing behaviour is on smaller screens for the likes of Serbian. Here, the button pushes against the SVG for quite some time before it snaps on to the new line, whereas with the existing/old behaviour, the SVG gets smaller and smaller, leaving a gap between it and the button and then finally snaps onto a new line. Worth checking with UX on the expectation here?

No worries, i've asked the question to see if we can get clarity on that as I did notice the shrinking too during manual testing - hopefully we'll get an answer soon. Thanks for the thorough review!

amoore108

LGTM. Just a reminder to remove the services from the new nav array before merging. Once they are removed, worth just double checking that the old nav hasn't been affected by these changes too 👍

pvaliani · 2026-04-09T08:17:28Z

LGTM. Just a reminder to remove the services from the new nav array before merging. Once they are removed, worth just double checking that the old nav hasn't been affected by these changes too 👍

No worries. I believe we'll do the swarm testing on preview (with new nav services in the list so we can test) and the sub task in the ticket should remind to update the array before merge

hotinglok

The spacing between the right edge of the button and the edge of the page doesn't match the designs for groups 1 and 2. Happy to approve if this is intentional.

…r groups

pvaliani · 2026-04-09T09:56:42Z

The spacing between the right edge of the button and the edge of the page doesn't match the designs for groups 1 and 2. Happy to approve if this is intentional.

Good spot dude, i've fixed that now:

Feel free to have a look and double check its all good.

pvaliani added 6 commits April 7, 2026 10:12

add services to config

b447d45

add logic for ukchina article page support

5eb49f5

new navigation styles for button

fbcac40

add header styling css for new nav and script link specs

92e5b98

styling updates for script switch link

3933214

adds tests for ukchina articles (legacy)

e120108

pvaliani self-assigned this Apr 7, 2026

pvaliani and others added 6 commits April 7, 2026 16:14

fix underline header issue on brandsvg

04dfec8

Merge branch 'latest' into WS-2323-add-script-switching-new-navigation

02e1186

cleanup

f06ed52

update script switch typography font size

c65f2c5

update test and snapshots

f19d41f

tighten script switch button position to more closely match design at…

c4a6f25

… group 0

pvaliani marked this pull request as ready for review April 8, 2026 07:25

Copilot AI review requested due to automatic review settings April 8, 2026 07:25

Copilot started reviewing on behalf of pvaliani April 8, 2026 07:26 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

amoore108 reviewed Apr 8, 2026

View reviewed changes

src/app/legacy/containers/Header/index.jsx Outdated Show resolved Hide resolved

amoore108 reviewed Apr 8, 2026

View reviewed changes

pvaliani and others added 4 commits April 8, 2026 10:38

Merge remote-tracking branch 'origin/latest' into WS-2323-add-script-…

e15c7b6

…switching-new-navigation

Merge branch 'latest' into WS-2323-add-script-switching-new-navigation

22155fd

remove article specific check on ukchina not needed

c6fd858

update tests

25b666e

amoore108 reviewed Apr 8, 2026

View reviewed changes

src/app/components/Header/ScriptLink/index.tsx Outdated Show resolved Hide resolved

amoore108 reviewed Apr 8, 2026

View reviewed changes

src/app/components/Header/ScriptLink/index.tsx Outdated Show resolved Hide resolved

amoore108 reviewed Apr 8, 2026

View reviewed changes

src/app/components/Header/ScriptLink/index.tsx Outdated Show resolved Hide resolved

pvaliani added 4 commits April 8, 2026 10:59

remove isNewNavigation prop to use service list directly

206e4cc

update tests with isNewNavigation removed

66825e2

update snapshots

fc0f0df

updates to styling to separate out classes for easier deletion

b5434ee

amoore108 reviewed Apr 8, 2026

View reviewed changes

src/app/legacy/containers/Header/index.styles.ts Outdated Show resolved Hide resolved

pvaliani and others added 5 commits April 8, 2026 13:37

add class selector to psammead brand for new nav script link style

989800b

adjust headerBrand to use min height for script link

3dea0d1

update snapshots

3d73268

Merge branch 'latest' into WS-2323-add-script-switching-new-navigation

ca84a24

update snapshots

e9b8e9e

amoore108 reviewed Apr 8, 2026

View reviewed changes

src/app/legacy/containers/Header/index.styles.ts Outdated Show resolved Hide resolved

pvaliani and others added 5 commits April 9, 2026 07:55

remove hasScriptLink prop

5930dfe

remove hasScriptLink prop style

ae80e77

update snapshots

2170a7c

Merge branch 'latest' into WS-2323-add-script-switching-new-navigation

2533f26

snapshot update

336d893

amoore108 approved these changes Apr 9, 2026

View reviewed changes

Merge branch 'latest' into WS-2323-add-script-switching-new-navigation

4ce75a1

Louis-Matsika approved these changes Apr 9, 2026

View reviewed changes

hotinglok reviewed Apr 9, 2026

View reviewed changes

pvaliani changed the title ~~WS-2323 - Add Language Script Switch Button to New Navigation Dual Script Language Services~~ WS-2323 - Add Language Script Switch Button to New Navigation Dual Script Language Services [Do Not Merge] Apr 9, 2026

pvaliani and others added 2 commits April 9, 2026 10:55

fix spacing issue w/ script switch relative to hamburger icon at lowe…

317ee75

…r groups

Merge branch 'latest' into WS-2323-add-script-switching-new-navigation

d312f31

Conversation

pvaliani commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Code changes

Testing

Useful Links

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

pvaliani Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amoore108 Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

pvaliani Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

pvaliani Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amoore108 commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pvaliani commented Apr 9, 2026

Uh oh!

amoore108 left a comment

Choose a reason for hiding this comment

Uh oh!

pvaliani commented Apr 9, 2026

Uh oh!

hotinglok left a comment

Choose a reason for hiding this comment

Uh oh!

pvaliani commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

pvaliani commented Apr 7, 2026 •

edited

Loading

amoore108 commented Apr 9, 2026 •

edited

Loading