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, detected primaryMediaType, and a new type field made available via the BFF 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. Navigation supports the new type prop also. [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.

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_tv/tv_programmes/w13xttmz?renderer_env=test
http://localhost:7081/afrique/bbc_afrique_radio/w1730k9s84l43h7?renderer_env=test

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.

This branch is currently on preview 2 environment. The cache has temporarily been increased to 15 minutes to make testing easier because what you need to do to get the test iSite config through for the nav, and for this to work, is to

first visit a page with ?renderer_env=live at the end for example https://simorgh2.belfrage-preview.test.api.bbc.com/afrique?renderer_env=test. This gets the test iSite config and will cache it.
then visit pages with ?renderer_env=live, for example the ones above, to check that the right nav items are highlighted.

After the cache timeout time, you will need to revisit with ?renderer_env=test again.

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: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

Looks good now!

…ion-attribution

LilyL0u · 2026-08-19T16:59:13Z

Tested with extended cache on preview. See slack thread for screenshots: https://bbc-tpg.slack.com/archives/C03RK72084S/p1787152060510699

…ion-attribution

alex-magana · 2026-08-20T12:54:27Z


    const { metadata: { atiAnalytics = undefined } = {} } = pageData ?? {};

+    if (typeof window !== 'undefined') {


Is this log meant to be removed when we revert the increased cache max-age?

yes, I will remove the logs and cache change when we have finished testing 👍

alex-magana · 2026-08-20T13:05:55Z

+
+  const primaryMediaType = (() => {
+    const blockTypes = pageData?.blockTypes ?? [];
+    if (blockTypes.includes('audio')) return 'audio' as const;
+    if (blockTypes.includes('video')) return 'video' as const;
+    // Fallback: scan top-level content blocks for an audio or video block.
+    // This covers SFV articles where blockTypes may not be populated.
+    const contentBlocks = (pageData?.content?.model?.blocks ?? []) as {
+      type: string;
+    }[];
+    if (contentBlocks.some(b => b.type === 'audio')) return 'audio' as const;
+    if (contentBlocks.some(b => b.type === 'video')) return 'video' as const;
+    return undefined;
+  })();


I appreciate the use of comments here as a guide.

Please consider adding tests as a way of documenting the scenario cover by this block of code.

I have added tests for this block of code now 👍

alex-magana · 2026-08-20T13:15:46Z

+  const watchIndex = topItems.findIndex(item => item.type === 'watch');
+  const listenIndex = topItems.findIndex(item => item.type === 'listen');


Suggested change

const watchIndex = topItems.findIndex(item => item.type === 'watch');

const listenIndex = topItems.findIndex(item => item.type === 'listen');

const focusableItemIndex = topItems.findIndex(item => item.type === 'watch' || item.type === 'listen');

alex-magana · 2026-08-20T13:19:21Z

+  // Video pages, video mediaArticles, and article pages with a video primaryMediaType.
+  // If there's no Watch item to attribute to, this falls back to highlighting
+  // Home as a default categorisation only, so it shouldn't be announced.
+  if (
+    pageType === TV_PAGE ||
+    pageType === LIVE_TV_PAGE ||
+    (pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'video') ||
+    (pageType === ARTICLE_PAGE && primaryMediaType === 'video')
+  ) {
+    return watchIndex > -1
+      ? { index: watchIndex, shouldAnnounce: true }
+      : { index: 0, shouldAnnounce: false };
+  }
+
+  // Audio pages, audio mediaArticles, and article pages with an audio primaryMediaType
+  // If there's no Listen item to attribute to, this falls back to highlighting
+  // Home as a default categorisation only, so it shouldn't be announced.
+  if (
+    pageType === AUDIO_PAGE ||
+    pageType === LIVE_RADIO_PAGE ||
+    (pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'audio') ||
+    (pageType === ARTICLE_PAGE && primaryMediaType === 'audio')
+  ) {
+    return listenIndex > -1
+      ? { index: listenIndex, shouldAnnounce: true }
+      : { index: 0, shouldAnnounce: false };
+  }


Suggested change

// Video pages, video mediaArticles, and article pages with a video primaryMediaType.

// If there's no Watch item to attribute to, this falls back to highlighting

// Home as a default categorisation only, so it shouldn't be announced.

if (

pageType === TV_PAGE ||

pageType === LIVE_TV_PAGE ||

(pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'video') ||

(pageType === ARTICLE_PAGE && primaryMediaType === 'video')

) {

return watchIndex > -1

? { index: watchIndex, shouldAnnounce: true }

: { index: 0, shouldAnnounce: false };

}

// Audio pages, audio mediaArticles, and article pages with an audio primaryMediaType

// If there's no Listen item to attribute to, this falls back to highlighting

// Home as a default categorisation only, so it shouldn't be announced.

if (

pageType === AUDIO_PAGE ||

pageType === LIVE_RADIO_PAGE ||

(pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'audio') ||

(pageType === ARTICLE_PAGE && primaryMediaType === 'audio')

) {

return listenIndex > -1

? { index: listenIndex, shouldAnnounce: true }

: { index: 0, shouldAnnounce: false };

}

// Video pages, video mediaArticles, and article pages with a video primaryMediaType.

// Audio pages, audio mediaArticles, and article pages with an audio primaryMediaType

// If there's no Watch or Listen item to attribute to, this falls back to highlighting

// Home as a default categorisation only, so it shouldn't be announced.

if (

pageType === TV_PAGE ||

pageType === LIVE_TV_PAGE ||

pageType === AUDIO_PAGE ||

pageType === LIVE_RADIO_PAGE ||

(pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'video') ||

(pageType === ARTICLE_PAGE && primaryMediaType === 'video') ||

(pageType === MEDIA_ARTICLE_PAGE && primaryMediaType === 'audio') ||

(pageType === ARTICLE_PAGE && primaryMediaType === 'audio')

) {

return focusableItemIndex > -1

? { index: focusableItemIndex, shouldAnnounce: true }

: { index: 0, shouldAnnounce: false };

}

…on' of github.com:bbc/simorgh into WS-2117-add-lightweight-contextual-navigation-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 Outdated

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

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

pvaliani reviewed Jul 29, 2026

View reviewed changes

louisearchibald assigned LilyL0u Aug 14, 2026

holchris approved these changes Aug 18, 2026

View reviewed changes

pvaliani reviewed Aug 18, 2026

View reviewed changes

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

watch and listen do not show on lite

6c3df6f

pvaliani approved these changes Aug 18, 2026

View reviewed changes

LilyL0u and others added 4 commits August 19, 2026 14:24

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

557b60b

…ion-attribution

put log to observe on preview

0fc1abc

temp browser console logging

eeb251a

increase cache timout temporarily

dfcec29

LilyL0u changed the title ~~WS-2117 Add lightweight contextual navigation attribution~~ [DNM BEFORE REMOVING TEMP CACHE INCREASE] WS-2117 Add lightweight contextual navigation attribution Aug 19, 2026

LilyL0u and others added 2 commits August 19, 2026 17:15

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

4404942

…ion-attribution

tests

5c5845c

LilyL0u and others added 2 commits August 19, 2026 18:14

lint

30bdbe0

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

582ba57

…ion-attribution

pvaliani approved these changes Aug 20, 2026

View reviewed changes

alex-magana reviewed Aug 20, 2026

View reviewed changes

LilyL0u added 7 commits August 20, 2026 15:15

added tests for primaryMediaType

19f0692

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

edfa0dc

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

lint and ts

c9439c5

fixed pageLayoutWrapper tests

f281e24

remove logging and changed cache

00e3ab7

leftover removals from removing cache log stuff

b40c2bd

lint

86a0096

LilyL0u changed the title ~~[DNM BEFORE REMOVING TEMP CACHE INCREASE] WS-2117 Add lightweight contextual navigation attribution~~ WS-2117 Add lightweight contextual navigation attribution Aug 21, 2026

LilyL0u merged commit 9a694d9 into latest Aug 21, 2026
17 checks passed

LilyL0u deleted the WS-2117-add-lightweight-contextual-navigation-attribution branch August 21, 2026 11:01


		const { metadata: { atiAnalytics = undefined } = {} } = pageData ?? {};

		if (typeof window !== 'undefined') {

		const watchIndex = topItems.findIndex(item => item.type === 'watch');
		const listenIndex = topItems.findIndex(item => item.type === 'listen');

	const watchIndex = topItems.findIndex(item => item.type === 'watch');
	const listenIndex = topItems.findIndex(item => item.type === 'listen');
	const focusableItemIndex = topItems.findIndex(item => item.type === 'watch' \|\| item.type === 'listen');

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!

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!

Uh oh!

pvaliani left a comment

Choose a reason for hiding this comment

Uh oh!

LilyL0u commented Aug 19, 2026

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

LilyL0u commented Jul 16, 2026 •

edited

Loading