diff --git a/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx b/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx
index b52ec46f790..06353856f78 100644
--- a/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx
+++ b/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx
@@ -26,7 +26,7 @@ const Component = ({ service, variant }: Props) => {
const WithLink = ({ service, variant }: Props) => {
return (
-
+
{services[service][variant].translations.relatedContent}
diff --git a/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx b/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx
index 14329a72d65..a92f26892c8 100644
--- a/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx
+++ b/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx
@@ -7,17 +7,17 @@ import { Services } from '../../../../models/types/global';
interface Props {
service?: Services;
- href?: string;
+ link?: string;
}
/* eslint-disable react/prop-types */
const SubheadWithContext = ({
children = '',
- href = '',
+ link = '',
service = 'mundo',
}: PropsWithChildren) => (
- {children}
+ {children}
);
@@ -33,7 +33,7 @@ describe('Curation Subhead Component', () => {
it('should render children within an h2', () => {
const { container } = render(
- My Text,
+ My Text,
);
const anchorElement = container.querySelector('a');
diff --git a/src/app/pages/TopicPage/Curation/Subhead/index.tsx b/src/app/pages/TopicPage/Curation/Subhead/index.tsx
index b278e3509f9..fdabe30f54e 100644
--- a/src/app/pages/TopicPage/Curation/Subhead/index.tsx
+++ b/src/app/pages/TopicPage/Curation/Subhead/index.tsx
@@ -7,16 +7,16 @@ import { LeftChevron, RightChevron } from '../../../../components/icons';
import { ServiceContext } from '../../../../contexts/ServiceContext';
interface Props {
- href?: string;
+ link?: string;
a11yID?: string;
}
-const Subhead = ({ children, href, a11yID }: PropsWithChildren) => {
+const Subhead = ({ children, link, a11yID }: PropsWithChildren) => {
const { service, script, dir } = useContext(ServiceContext);
- const Wrapper = href
+ const Wrapper = link
? ({ children: innerChildren }: PropsWithChildren) => (
-
+
{innerChildren}
{dir === 'ltr' ? : }
@@ -29,6 +29,6 @@ const Subhead = ({ children, href, a11yID }: PropsWithChildren) => {
);
};
-Subhead.defaultProps = { href: '', a11yID: '' };
+Subhead.defaultProps = { link: '', a11yID: '' };
export default Subhead;
diff --git a/src/app/pages/TopicPage/Curation/index.jsx b/src/app/pages/TopicPage/Curation/index.jsx
index 9f5dc22de6d..01f174c617b 100644
--- a/src/app/pages/TopicPage/Curation/index.jsx
+++ b/src/app/pages/TopicPage/Curation/index.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { arrayOf, oneOf, shape, string, number } from 'prop-types';
import pathOr from 'ramda/src/pathOr';
+import VisuallyHiddenText from '#psammead/psammead-visually-hidden-text/src';
import CurationGrid from './CurationGrid';
import Subheading from './Subhead';
@@ -40,12 +41,19 @@ const Curation = ({
const createID = titleText => {
return titleText.replaceAll(' ', '-');
};
- return curationLength > 1 && (title || position === 0) ? (
-
-
- {title}
-
-
+ const isFirstCuration = position === 0;
+ const SubheadingComponent = isFirstCuration ? VisuallyHiddenText : Subheading;
+ const id = createID(title || topStoriesTitle);
+
+ return curationLength > 1 && (title || isFirstCuration) ? (
+
+
+ {title || topStoriesTitle}
+
+
) : (