[WS-2852] - Sports Header Tipo Headline (full width)

ws-nextjs-app/pages/[service]/live/[id]/Header/index.test.tsx

@@ -120,19 +120,5 @@ describe('Live Page Header', () => {
 
       expect(tabIndex).toEqual('-1');
     });
-    it('should render a translated match summary H2 for sport data headers', async () => {
-      await act(async () => {
-        render(<Header title="I am a title" showLiveLabel showSportData />, {
-          service: 'afaanoromoo',
-        });
-      });
-
-      expect(
-        screen.getByRole('heading', {
-          level: 2,
-          name: 'Cuunfaa Taphaa',
-        }),
-      ).toBeInTheDocument();
-    });
   });
 });

ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx

@@ -14,6 +14,8 @@ import { HeadToHeadV2Data } from '#app/components-webcore/SportDataHeader/head-t
 import { PortraitVideoItems } from '#app/models/types/optimo';
 import useLivePagePolling from '#app/hooks/useLivePagePolling';
 import useToggle from '#app/hooks/useToggle';
+import Heading from '#app/components/Heading';
+import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
 import {
   getImageFromPost,
   getHeadlineFromPost,
@@ -113,6 +115,8 @@ const LivePage = ({ pageData, assetId }: LivePageProps) => {
     sportDataEventContent || {};
   const showSportData = !!sportData && Boolean(sportHeaderEnabled);
 
+  const matchSummary = translations.sport?.matchSummary ?? 'Match Summary';
+
   const {
     url: imageUrl,
     urlTemplate: imageUrlTemplate,
@@ -228,6 +232,17 @@ const LivePage = ({ pageData, assetId }: LivePageProps) => {
           />
         )}
         <div css={styles.outerGrid}>
+          {showSportData && (
+            <Heading
+              level={2}
+              size="trafalgar"
+              id="content"
+              tabIndex={-1}
+              css={styles.heading}
+            >
+              {title}
+            </Heading>
+          )}
           <div css={styles.firstSection}>
             {keyPoints && (
               <KeyPoints keyPointsContent={keyPoints.model.blocks} />

ws-nextjs-app/pages/[service]/live/[id]/live.test.tsx

@@ -817,7 +817,7 @@ describe('Live Page', () => {
       expect(title).toBeInTheDocument();
     });
 
-    it('should render a visually hidden h1 when displaying sportData', async () => {
+    it('should render the title as the only visible h1 when displaying sportData', async () => {
       const pageDataWithSportData = {
         ...mockPageData,
         sportDataEventContent: sportDataFixture.data.sportDataEventContent,
@@ -828,15 +828,56 @@ describe('Live Page', () => {
         render(<Live pageData={pageDataWithSportData} />);
       });
 
-      const visuallyHiddenTitle = screen.getByText(
-        'Israeli tanks shell Jabalia camp as heavy fighting continues in north Gaza', // mock data, in production this would be a sport title
+      const title = screen.getByRole('heading', {
+        level: 1,
+        name: 'Israeli tanks shell Jabalia camp as heavy fighting continues in north Gaza', // mock data, in production this would be a sport title
+      });
+      expect(title).toBeInTheDocument();
+      expect(title).not.toHaveStyle(
+        'overflow: hidden; position: absolute; width: 1px;',
       );
-      expect(visuallyHiddenTitle).toBeInTheDocument();
-      expect(visuallyHiddenTitle).toHaveStyle(
+    });
+
+    it('should render a translated visually hidden match summary h2 below the h1 when displaying sportData', async () => {
+      const pageDataWithSportData = {
+        ...mockPageData,
+        sportDataEventContent: sportDataFixture.data.sportDataEventContent,
+      } as unknown as ComponentProps['pageData'];
+      mockPollingUpdate(pageDataWithSportData);
+
+      await act(async () => {
+        render(<Live pageData={pageDataWithSportData} />, {
+          service: 'afaanoromoo',
+        });
+      });
+
+      const matchSummary = screen.getByRole('heading', {
+        level: 2,
+        name: 'Cuunfaa Taphaa',
+      });
+      expect(matchSummary).toHaveStyle(
         'overflow: hidden; position: absolute; width: 1px;',
       );
     });
 
+    it('should render the sport banner before the headings grid in the DOM order when displaying sportData', async () => {
+      const pageDataWithSportData = {
+        ...mockPageData,
+        sportDataEventContent: sportDataFixture.data.sportDataEventContent,
+      } as unknown as ComponentProps['pageData'];
+      mockPollingUpdate(pageDataWithSportData);
+
+      const { container } = await act(async () => {
+        return render(<Live pageData={pageDataWithSportData} />);
+      });
+
+      const domOrder = Array.from(
+        container.querySelectorAll('h1, [data-testid="head-to-head-v2"]'),
+      );
+      expect(domOrder[0]).toHaveAttribute('data-testid', 'head-to-head-v2');
+      expect(domOrder[1].tagName).toBe('H1');
+    });
+
     it('should not render HeadToHeadV2 when sportDataEventContent is not present', async () => {
       mockPollingUpdate(mockPageData);
 

ws-nextjs-app/pages/[service]/live/[id]/styles.ts

@@ -8,6 +8,15 @@ export default {
       maxWidth: `${pixelsToRem(1008)}rem`,
       margin: `${pixelsToRem(20)}rem auto`,
     }),
+  heading: () =>
+    css({
+      gridColumn: '1 / 13',
+      textAlign: 'start',
+      '&:focus': {
+        outline: 'none',
+      },
+      marginBottom: '1rem',
+    }),
   outerGrid: ({ mq, gridWidths, spacings }: Theme) =>
     css({
       maxWidth: `${pixelsToRem(gridWidths[1280])}rem`,