= ({
activeIndex: -1,
clickTracker: dropdownNavClickTrackerHandler,
viewTracker: dropdownNavViewTracker,
- pageType,
})}
);
diff --git a/src/app/components/PageLayoutWrapper/index.tsx b/src/app/components/PageLayoutWrapper/index.tsx
index 182db566f04..f508c43c279 100644
--- a/src/app/components/PageLayoutWrapper/index.tsx
+++ b/src/app/components/PageLayoutWrapper/index.tsx
@@ -33,6 +33,7 @@ type Props = {
type: PageTypes;
topics?: { topicName: string }[];
};
+ blockTypes?: string[];
content?: { model?: ModelType };
secondaryColumn?: { topStories: TopStoryItem[] };
mostRead?: { items: (OptimoMostReadRecord | CPSMostReadRecord)[] };
@@ -54,6 +55,20 @@ const PageLayoutWrapper = ({
const isErrorPage = ![200].includes(status) || !status;
const pageType = pageData?.metadata?.type;
+
+ 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;
+ })();
const reportingPageType = pageType?.replace(/ /g, '');
const isOfflinePage = pageType === OFFLINE_PAGE;
const isWindowValid = typeof window !== 'undefined';
@@ -233,6 +248,7 @@ const PageLayoutWrapper = ({
{
+const HeaderContainer = ({
+ navItems,
+ propsForTopBarOJComponent,
+ primaryMediaType,
+}) => {
const { isAmp, isApp, pageType, isLite } = use(RequestContext);
const { service, translations, dir, scriptLink, lang, serviceLang } =
use(ServiceContext);
@@ -146,6 +150,7 @@ const HeaderContainer = ({ navItems, propsForTopBarOJComponent }) => {
);
diff --git a/src/app/legacy/psammead/psammead-navigation/src/index.jsx b/src/app/legacy/psammead/psammead-navigation/src/index.jsx
index 0c8a66de6a3..dd5cc4ab4b3 100644
--- a/src/app/legacy/psammead/psammead-navigation/src/index.jsx
+++ b/src/app/legacy/psammead/psammead-navigation/src/index.jsx
@@ -129,14 +129,26 @@ const StyledSpan = styled.span`
}
`;
-const CurrentLink = ({ linkId, children: link, currentPageText = null }) => (
+// Always wraps the active link's text in StyledSpan so its visual "active"
+// underline (`a[data-active="true"] span::after`) renders whenever the item
+// is active, independent of whether the "current page" screen reader
+// announcement is made. The hidden announcement text, id and role are only
+// added when `announce` is true.
+const CurrentLink = ({
+ linkId,
+ children: link,
+ currentPageText = null,
+ announce = true,
+}) => (
- {`${currentPageText}, `}
+ {announce && (
+ {`${currentPageText}, `}
+ )}
{link}
);
@@ -199,26 +211,41 @@ export const NavigationLi = ({
clickTracker = null,
currentPageText = null,
active = false,
+ // Controls whether the "current page" screen reader announcement is added
+ // when this item is active. Callers should set this to false when an item
+ // is marked active for categorisation purposes only (e.g. a fallback
+ // highlight), rather than because the user is genuinely on that page.
+ announceCurrentPage = true,
dir = 'ltr',
viewTracker = null,
...props
}) => {
+ const shouldAnnounceCurrentPage = Boolean(
+ active && announceCurrentPage && currentPageText,
+ );
+
return (
- {active && currentPageText ? (
+ {active ? (
-
+
{link}
@@ -226,7 +253,7 @@ export const NavigationLi = ({