WS-2117 Add lightweight contextual navigation attribution

[LilyL0u]

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.

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

Useful Links

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