WSTEAMA-1244 P2 video promos have no heading semantics

src/app/components/Curation/CurationGrid/index.tsx

@@ -6,8 +6,8 @@ import { CurationGridProps } from '../types';
 
 const CurationGrid = ({
   summaries,
-  headingLevel,
   isFirstCuration,
+  headingLevel,
 }: CurationGridProps) => {
   const hasMultiplePromos = summaries.length > 1;
   const firstPromo = summaries[0];
@@ -27,8 +27,8 @@ const CurationGrid = ({
               <li css={styles.item} key={promo.id}>
                 <CurationPromo
                   {...promo}
-                  headingLevel={headingLevel}
                   lazy={lazyLoadImages}
+                  headingLevel={headingLevel}
                 />
               </li>
             );
@@ -38,8 +38,8 @@ const CurationGrid = ({
         <div css={styles.item}>
           <CurationPromo
             {...firstPromo}
-            headingLevel={headingLevel}
             lazy={!isFirstCuration}
+            headingLevel={headingLevel}
           />
         </div>
       )}

src/app/components/Curation/index.test.tsx

@@ -216,5 +216,117 @@ describe('Curation', () => {
 
       expect(document.querySelectorAll('section h2').length).toBe(1);
     });
+
+    it('should have h3 summary titles when page has multiple curations and a curation title', () => {
+      const { summaries } = mundoFixture.data.curations[1];
+
+      render(
+        <Curation
+          title="2nd Curation"
+          visualProminence={NORMAL}
+          visualStyle={NONE}
+          position={1}
+          summaries={summaries}
+          curationLength={2}
+        />,
+      );
+      expect(document.querySelectorAll('h3').length).toBe(4);
+    });
+
+    it('should have h3 summary titles when page has multiple curations and no curation title and is the first curation - simple curation', () => {
+      const { summaries } = mundoFixture.data.curations[0];
+
+      render(
+        <Curation
+          visualProminence={NORMAL}
+          visualStyle={NONE}
+          position={0}
+          summaries={summaries}
+          curationLength={2}
+        />,
+      );
+      expect(document.querySelectorAll('h3').length).toBe(8);
+    });
+
+    it('should have h3 summary titles when page has multiple curations and no curation title and is the first curation - hierarchical curation', () => {
+      const { summaries } = mundoFixture.data.curations[0];
+
+      render(
+        <Curation
+          visualProminence={HIGH}
+          visualStyle={NONE}
+          position={0}
+          summaries={summaries}
+          curationLength={2}
+        />,
+      );
+      expect(document.querySelectorAll('h3').length).toBe(8);
+    });
+
+    it('should have h2 summary titles when page has one curation - somple curation', () => {
+      const { summaries } = fixture.data.curations[0];
+
+      render(
+        <Curation
+          visualProminence={NORMAL}
+          visualStyle={NONE}
+          position={0}
+          summaries={summaries}
+          curationLength={1}
+        />,
+      );
+      expect(document.querySelectorAll('h2').length).toBe(24);
+      expect(document.querySelectorAll('h3').length).toBe(0);
+    });
+
+    it('should have h2 summary titles when page has one curation - hierarchical curation', () => {
+      const { summaries } = fixture.data.curations[0];
+
+      render(
+        <Curation
+          visualProminence={HIGH}
+          visualStyle={NONE}
+          position={0}
+          summaries={summaries}
+          curationLength={1}
+        />,
+      );
+      expect(document.querySelectorAll('h2').length).toBe(12);
+      expect(document.querySelectorAll('h3').length).toBe(0);
+    });
+
+    it('should have visually hidden title text as h2 if it is the first curation of multiple and has a title - simple curation', () => {
+      const { summaries } = mundoFixture.data.curations[0];
+
+      render(
+        <Curation
+          title="First Curation"
+          visualProminence={NORMAL}
+          visualStyle={NONE}
+          position={0}
+          summaries={summaries}
+          curationLength={6}
+        />,
+      );
+      expect(document.querySelectorAll('h2').length).toBe(1); // the visually hidden h2 heading
+      expect(document.querySelectorAll('h3').length).toBe(8); // the visible h3 promos
+    });
+
+    it('should have visually hidden title text as h2 if it is the first curation of multiple and has a title - hierarchial curation', () => {
+      const { summaries } = mundoFixture.data.curations[0];
+
+      render(
+        <Curation
+          title="First Curation"
+          visualProminence={HIGH}
+          visualStyle={NONE}
+          position={0}
+          summaries={summaries}
+          curationLength={6}
+        />,
+      );
+      expect(document.querySelectorAll('h2').length).toBe(1); // the visually hidden h2 heading
+      expect(document.querySelectorAll('h3').length).toBe(8); // the visible h3 promos
+    });
   });
 });

src/app/components/Curation/index.tsx

@@ -49,7 +49,6 @@ export default ({
   title = '',
   topStoriesTitle = '',
   link = '',
-  headingLevel = 2,
   position = 0,
   curationLength = 0,
   mostRead,
@@ -63,7 +62,6 @@ export default ({
     radioSchedule,
     embed,
   });
-
   const GridComponent = getGridComponent(componentName);
 
   const isFirstCuration = position === 0;
@@ -143,31 +141,31 @@ export default ({
     case SIMPLE_CURATION_GRID:
     case HIERARCHICAL_CURATION_GRID:
     default:
-      return curationLength > 1 &&
-        summaries.length > 0 &&
-        (title || isFirstCuration) ? (
-        <section aria-labelledby={id} role="region">
-          {isFirstCuration ? (
-            <VisuallyHiddenText id={id} as="h2">
-              {curationSubheading}
-            </VisuallyHiddenText>
-          ) : (
-            <Subheading id={id} link={link}>
-              {curationSubheading}
-            </Subheading>
-          )}
+      if (summaries.length > 0) {
+        return curationLength > 1 && (title || isFirstCuration) ? (
+          <section aria-labelledby={id} role="region">
+            {isFirstCuration ? (
+              <VisuallyHiddenText id={id} as="h2">
+                {curationSubheading}
+              </VisuallyHiddenText>
+            ) : (
+              <Subheading id={id} link={link}>
+                {curationSubheading}
+              </Subheading>
+            )}
+            <GridComponent
+              summaries={summaries}
+              headingLevel={3} // if there are multiple curations, each curation's heading will be h2 and the promos within will be h3
+            />
+          </section>
+        ) : (
           <GridComponent
             summaries={summaries}
-            headingLevel={isFirstCuration ? 3 : headingLevel}
+            headingLevel={2} // if there is only one curation, all promos should be h2
             isFirstCuration={isFirstCuration}
           />
-        </section>
-      ) : (
-        <GridComponent
-          summaries={summaries}
-          headingLevel={headingLevel}
-          isFirstCuration={isFirstCuration}
-        />
-      );
+        );
+      }
+      return null;
   }
 };

src/app/models/types/curationData.ts

@@ -62,7 +62,6 @@ export interface BaseCuration {
 }
 
 export interface Curation extends BaseCuration {
-  headingLevel?: number;
   topStoriesTitle?: string;
   curationLength?: number;
   nthCurationByStyleAndProminence?: number;

src/app/pages/HomePage/HomePage.tsx

@@ -107,7 +107,6 @@ const HomePage = ({ pageData }: HomePageProps) => {
                 return (
                   <React.Fragment key={`${curationId}-${position}`}>
                     <HomeCuration
-                      headingLevel={curationTitle ? 3 : 2}
                       visualStyle={visualStyle as VisualStyle}
                       visualProminence={visualProminence as VisualProminence}
                       summaries={summaries || []}

src/app/pages/HomePage/index.test.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { data as kyrgyzHomePageData } from '#data/kyrgyz/homePage/index.json';
 import { data as afriqueHomePageDataFixture } from '#data/afrique/homePage/index.json';
+import { data as pidginHomePageDataFixture } from '#data/pidgin/homePage/index.json';
 import { render } from '../../components/react-testing-library-with-providers';
 import HomePage from './HomePage';
 import { suppressPropWarnings } from '../../legacy/psammead/psammead-test-helpers/src';
@@ -49,6 +50,17 @@ describe('Home Page', () => {
     );
   });
 
+  it('should have h2s for curation heading levels and h3 for summary heading levels', () => {
+    const { container } = render(
+      <HomePage pageData={pidginHomePageDataFixture} />,
+      {
+        service: 'pidgin',
+      },
+    );
+    expect(container.querySelectorAll('h2').length).toBe(5);
+    expect(container.querySelectorAll('h3').length).toBe(27);
+  });
+
   it('should apply provided margin size to the main element', () => {
     // @ts-expect-error suppress pageData prop type conflicts due to missing imageAlt on selected historical test data for curations
     const { getByRole } = render(<HomePage pageData={homePageData} />, {

src/app/pages/TopicPage/TopicPage.jsx

@@ -92,11 +92,9 @@ const TopicPage = ({ pageData }) => {
                   visualStyle,
                   visualProminence,
                 });
-
               return (
                 <React.Fragment key={`${curationId}-${position}`}>
                   <Curation
-                    headingLevel={curationTitle && 3}
                     visualStyle={visualStyle}
                     visualProminence={visualProminence}
                     summaries={summaries}