WS-2117 Add lightweight contextual navigation attribution by LilyL0u · Pull Request #14228 · bbc/simorgh

LilyL0u · 2026-07-16T15:13:11Z

https://bbc.atlassian.net/browse/WS-2117

i have updated this so that the home tab is highlighted when watch or listen is not highlighted, so it acts as a default or fallback. When the home page nav item is active it will only say 'current page' if the user is actually on the home page, otherwise it will just read 'home', link and list of 3, etc.

This pull request enhances the navigation highlighting logic to more accurately reflect the user's current page context, especially for media pages (audio/video). The main improvement is the introduction of page-type and media-type-based attribution for navigation highlighting, ensuring that "Watch" or "Listen" are highlighted when appropriate, rather than always defaulting to "Home" or having nothing highlighted. This is achieved through changes in the navigation logic by passing the detected primary media type through the component tree for article pages containing media.

Navigation logic improvements:

Updated getActiveTopIndex in Navigation/index.tsx to use page type and detected primaryMediaType to determine which top navigation item ("Home", "Watch", or "Listen") should be highlighted. This ensures that, for example, video pages highlight "Watch" and audio pages highlight "Listen", with sensible fallbacks when those items are not present. [1] [2]
The primaryMediaType is now detected in PageLayoutWrapper/index.tsx by inspecting blockTypes and content blocks, and is passed down through HeaderContainer to Navigation. [1] [2] [3] [4]

Test coverage improvements:

Added a comprehensive set of tests to Navigation/index.test.tsx to verify correct navigation highlighting for a wide variety of page and media types, including articles, topics, TV, live TV, media articles, audio, and live radio pages, with and without corresponding navigation items.

Type and prop updates:

Updated type definitions and prop passing in PageLayoutWrapper, HeaderContainer, and Navigation components to support the new primaryMediaType prop. [1] [2] [3]

Imports and constants:

Added the necessary page type constants to relevant files to support the new logic. [1] [2]

These changes collectively ensure that navigation highlighting is context-aware, improving usability for users on media-rich pages.Resolves

A weakness of this method is that it relies on the order of the top nav always being: (1) Home, (2) Watch, (3) Listen, as the links in these items can be urls with no indication of what media they contain. The text on them also comes from the BFF, rather than being translated in Simorgh, so unless we translate the text, we don't know what it says to map it to which item it is.

It should work for radio pages, tv pages, and article and media article pages containing media.

Testing

Some example URLs

http://localhost:7081/afrique/articles/crevwjxjdgyo?renderer_env=live
http://localhost:7081/afrique/articles/cd9wdkqjgk9o?renderer_env=live
http://localhost:7081/afrique/bbc_afrique_radio/w1730k9s84l43h7?renderer_env=live

What we want to see is:

on on demand radio pages, podcast pages, and live radio pages, the 'listen' nav item is active and will announce 'current page' with screenreaders (in the language of the service).
on media article pages where the media is audio, the above behaviour should also happen.
on on demand tv pages and live tv pages, the 'Watch' nav item should be active and announce current page.
on media article pages where the media is video, the above behaviour should also happen
On article and topic pages that are not linked in the bottom nav, the Home nav item should be active (but it should not say current page).
On article and topic pages that are linked in the bottom nav, the Home nav item should be active (and the corresponding bottom nav item) and it should not say current page.
On the Home page, the Home nav item should be active and it should say current page.

Useful Links

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

…ion-attribution

…on' of github.com:bbc/simorgh into WS-2117-add-lightweight-contextual-navigation-attribution

…ion-attribution

Copilot

Pull request overview

This PR updates Simorgh’s “new” header navigation behaviour so the highlighted top nav item is context-aware (Watch/Listen for relevant media pages) and improves screen reader announcements by only using “current page” when the highlight reflects a genuine location.

Changes:

Added primaryMediaType detection in PageLayoutWrapper (via blockTypes / content blocks) and threaded it through HeaderContainer into the new Navigation container.
Reworked top-nav active-item selection in Navigation/index.tsx to use URL matching first, then page-type/media-type attribution, plus a shouldAnnounce flag to control “current page” announcements.
Updated psammead-navigation link rendering so active styling is independent of whether “current page” is announced, and added extensive navigation attribution tests/snapshots.

Reviewed changes

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

Show a summary per file

File	Description
ws-nextjs-app/integration/pages/live/arabic/snapshots/canonical.test.ts.snap	Snapshot update for live Arabic integration test output.
src/app/legacy/psammead/psammead-navigation/src/index.jsx	Adds `announceCurrentPage` control and decouples active underline styling from screen reader “current page” announcement.
src/app/legacy/containers/Header/index.jsx	Passes `primaryMediaType` down into the new navigation container.
src/app/components/PageLayoutWrapper/index.tsx	Detects `primaryMediaType` from page data and provides it to the header/navigation.
src/app/components/Navigation/index.tsx	Implements page-type/media-type based top-nav attribution and introduces `shouldAnnounce` behaviour for a11y.
src/app/components/Navigation/index.test.tsx	Adds broad unit coverage for the new attribution/announcement rules.
src/app/components/Navigation/snapshots/index.test.tsx.snap	Updates snapshots to reflect the new active/announcement markup.

…ion-attribution

pvaliani · 2026-07-29T10:01:32Z

+    pageType === TV_PAGE ||
+    pageType === LIVE_TV_PAGE ||
+    (pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'video') ||
+    (pageType === ARTICLE_PAGE && primaryMediaType === 'video')


Was just checking the ticket and it says an article page should highlight Home. These checks instead highlight Watch or Listen whenever a normal article contains an embedded video or audio clip.
Many ordinary news articles contain media without being video or audio pages. Should we remove the ARTICLE_PAGE checks and keep this behaviour for MEDIA_ARTICLE_PAGE only?

If the requirements changed then all good but thought i'd highlight

I made improvements that weren't in the ticket. Will check again with Gavin.

Gavin approves of also doing this for article pages with media 👍

pvaliani · 2026-07-29T10:05:59Z

+  // Watch/Listen category attribution. False when Home is highlighted only as
+  // a last-resort default (no match, or categorized Watch/Listen doesn't exist
+  // in nav so falls back to Home). The bottom nav only marks items active on
+  // genuine URL matches and always announces. The dropdown nav never marks


Maybe i've misunderstood but does this match the acceptance criteria? The ticket says secondary navigation items should not be highlighted, but this says matching bottom navigation items remain active and are announced

I think the ticket might be wrong there but will check. I would have to remove current functionality, that we only recently added, to fulfil that criteria!

Fine to keep the sub-navigation functionality that already existed 👍

pvaliani · 2026-07-29T11:03:18Z

+    (pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'audio') ||
+    (pageType === ARTICLE_PAGE && primaryMediaType === 'audio')
+  ) {
+    return topItems.length > 2


Should we check that the third item is actually Listen here? Japanese is using the new navigation, but its current items are Home, Watch and News TV. On an audio page this check would highlight and announce News TV as Listen. Might need to fall back back to Home when a Listen destination is not configured?

The problem is that there is no way of knowing whether Listen is present, or which one is Listen, unless we check against the translations for each service 😭 each url is different and can be a live radio, or on demand etc.

Good to know about the Japanese difference though. I did not know about that. Will need to think hmm

Yeah, checking the translated text or URLs seems unreliable. Since this is a temp solution, maybe we could use a small service-level mapping showing which services have Watch and Listen?

We could select the item from the original navigation, then fall back to Home if it is missing or hidden on Lite.

Longer term, something like a home/watch/listen value from the BFF would avoid needing this mapping. Could maybe create some sort of navigation role in the BFF, just brainstorming

I have asked on slack as this is something we need to check as this implementaiton won't work for the Japanese service! Good spot

…ion-attribution

LilyL0u and others added 18 commits July 16, 2026 16:12

wip

8b49158

prettier bug added an extra semicolon

0fca8e3

put back default of nothing highlighted for article not in bottom nav

afd4605

make home default highlighted

4e86887

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

6f5acc7

…ion-attribution

Updated snapshots and fixed linting issues

4897172

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

5ca1ba8

…ion-attribution

Updated integration snapshots

fd4797a

Merge branch 'WS-2117-add-lightweight-contextual-navigation-attributi…

71a422d

…on' of github.com:bbc/simorgh into WS-2117-add-lightweight-contextual-navigation-attribution

a11y fix for current page announcements

73c945b

new snaps

90a2988

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

5f16a0f

…ion-attribution

let's try this snapshot update

a26db35

snapshots after stopping timeout

f885d06

snapshots after running command to match github action

209417d

manually change snapshots to match github action integration test run

eccbe97

i think this removes snashots that were obsolete

9020e2d

more attempt at obsolete removal

bf372c0

LilyL0u marked this pull request as ready for review July 27, 2026 12:36

comment fix

45be34c

Copilot AI review requested due to automatic review settings July 28, 2026 09:14

Copilot started reviewing on behalf of LilyL0u July 28, 2026 09:15 View session

Copilot AI reviewed Jul 28, 2026

View reviewed changes

Comment thread src/app/legacy/psammead/psammead-navigation/src/index.jsx Outdated

Comment thread src/app/components/Navigation/index.tsx

LilyL0u and others added 5 commits July 28, 2026 10:48

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

f73b8e1

…ion-attribution

make shouldAnnounceCurrentPage into explicit boolean

63612df

update snapshot for css changes from latest

c2e768b

prettier?

56b0963

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

5bde2d7

…ion-attribution

pvaliani reviewed Jul 29, 2026

View reviewed changes

pvaliani and others added 2 commits July 29, 2026 15:41

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

1a7bc8e

…ion-attribution

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

a926415

…ion-attribution

holchris approved these changes Jul 30, 2026

View reviewed changes

LilyL0u and others added 3 commits July 30, 2026 11:47

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

1bd2b99

…ion-attribution

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

04d1f81

…ion-attribution

Merge branch 'latest' into WS-2117-add-lightweight-contextual-navigat…

412810f

…ion-attribution

Uh oh!

Conversation

LilyL0u commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Useful Links

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

LilyL0u commented Jul 16, 2026 •

edited

Loading