Merge pull request #10397 from bbc/topic-promos-first-curation

Visually-hidden h2 for first topic curation

src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx

@@ -26,7 +26,7 @@ const Component = ({ service, variant }: Props) => {
 const WithLink = ({ service, variant }: Props) => {
   return (
     <ServiceContextProvider service={service} variant={variant}>
-      <Subheading href="https://bbc.com">
+      <Subheading link="https://bbc.com">
         {services[service][variant].translations.relatedContent}
       </Subheading>
     </ServiceContextProvider>

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<Props>) => (
   <ServiceContextProvider service={service}>
-    <Subhead href={href}>{children}</Subhead>
+    <Subhead link={link}>{children}</Subhead>
   </ServiceContextProvider>
 );
 
@@ -33,7 +33,7 @@ describe('Curation Subhead Component', () => {
 
   it('should render children within an h2', () => {
     const { container } = render(
-      <SubheadWithContext href="https://bbc.com">My Text</SubheadWithContext>,
+      <SubheadWithContext link="https://bbc.com">My Text</SubheadWithContext>,
     );
 
     const anchorElement = container.querySelector('a');

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<Props>) => {
+const Subhead = ({ children, link, a11yID }: PropsWithChildren<Props>) => {
   const { service, script, dir } = useContext(ServiceContext);
 
-  const Wrapper = href
+  const Wrapper = link
     ? ({ children: innerChildren }: PropsWithChildren<Props>) => (
-        <a href={href}>
+        <a href={link}>
           <span>{innerChildren}</span>
           {dir === 'ltr' ? <RightChevron /> : <LeftChevron />}
         </a>
@@ -29,6 +29,6 @@ const Subhead = ({ children, href, a11yID }: PropsWithChildren<Props>) => {
   );
 };
 
-Subhead.defaultProps = { href: '', a11yID: '' };
+Subhead.defaultProps = { link: '', a11yID: '' };
 
 export default Subhead;

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) ? (
-    <section aria-labelledby={createID(title || topStoriesTitle)} role="region">
-      <Subheading a11yID={createID(title || topStoriesTitle)} href={link}>
-        {title}
-      </Subheading>
-      <Component promos={promos} headingLevel={headingLevel} />
+  const isFirstCuration = position === 0;
+  const SubheadingComponent = isFirstCuration ? VisuallyHiddenText : Subheading;
+  const id = createID(title || topStoriesTitle);
+
+  return curationLength > 1 && (title || isFirstCuration) ? (
+    <section aria-labelledby={id} role="region">
+      <SubheadingComponent as="h2" a11yID={id} id={id} link={link}>
+        {title || topStoriesTitle}
+      </SubheadingComponent>
+      <Component
+        promos={promos}
+        headingLevel={isFirstCuration ? 3 : headingLevel}
+      />
     </section>
   ) : (
     <Component promos={promos} headingLevel={headingLevel} />