Pass title to AMP iframe

bbc · Oct 18, 2024 · 0ec2f5c · 0ec2f5c
1 parent b85992a
commit 0ec2f5c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/app/components/AmpIframe/index.tsx b/src/app/components/AmpIframe/index.tsx
@@ -11,6 +11,7 @@ type Props = {
   width: number;
   height: number;
   src: string;
+  title?: string;
 };
 
 type ampMetadata = {
@@ -19,6 +20,7 @@ type ampMetadata = {
     imageHeight: number;
     image: string;
     src: string;
+    title?: string;
   };
 };
 
@@ -38,6 +40,7 @@ const AmpIframeElement = ({
   width,
   height,
   src,
+  title,
 }: PropsWithChildren<Props>) => (
   <amp-iframe
     class={className}
@@ -47,19 +50,25 @@ const AmpIframeElement = ({
     sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation allow-forms"
     resizable=""
     src={src}
+    title={title}
   >
     {children}
   </amp-iframe>
 );
 
 const AmpIframe = ({
-  ampMetadata: { imageWidth, imageHeight, image, src },
+  ampMetadata: { imageWidth, imageHeight, image, src, title },
 }: ampMetadata) => {
   return (
     <>
       <AmpHead />
       <GridItemMedium gridColumnStart={undefined} gridSpan={undefined}>
-        <AmpIframeElement width={imageWidth} height={imageHeight} src={src}>
+        <AmpIframeElement
+          width={imageWidth}
+          height={imageHeight}
+          src={src}
+          title={title}
+        >
           {/* @ts-expect-error Property 'overflow' does not exist on type 'DivProps & { css?: Interpolation<Theme>; }'. */}
           <div overflow="" css={styles.overflow}>
             <button type="button" css={styles.button}>

diff --git a/src/app/pages/ArticlePage/ElectionBanner/config.ts b/src/app/pages/ArticlePage/ElectionBanner/config.ts
@@ -3,9 +3,10 @@ import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 const IFRAME_BASE_URL = getEnvConfig().SIMORGH_INCLUDES_BASE_URL;
 
 export default {
+  iframeHeight: 340,
   iframeSrc: `${IFRAME_BASE_URL}/include/vjafwest/1365-2024-us-presidential-election-banner/develop/{service}/app`,
   iframeSrcAmp: `${IFRAME_BASE_URL}/include/vjafwest/1365-2024-us-presidential-election-banner/develop/{service}/app/amp`,
-  iframeHeight: 340,
+  iframeTitle: 'US Election results',
   thingIds: [
     '647d5613-e0e2-4ef5-b0ce-b491de38bdbd', // https://www.bbc.co.uk/things/647d5613-e0e2-4ef5-b0ce-b491de38bdbd
     '82857f8e-8134-462a-bb32-b7b14f4eab75', // https://www.bbc.co.uk/things/82857f8e-8134-462a-bb32-b7b14f4eab75

diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.tsx
@@ -20,7 +20,8 @@ export default function ElectionBanner({ aboutTags }: { aboutTags: Tag[] }) {
   if (isLite) return null;
   if (isLive()) return null; // TODO: Remove once going Live
 
-  const { iframeSrc, iframeSrcAmp, iframeHeight, thingIds } = BANNER_CONFIG;
+  const { iframeHeight, iframeSrc, iframeSrcAmp, iframeTitle, thingIds } =
+    BANNER_CONFIG;
 
   const validAboutTag = aboutTags?.some(tag => thingIds.includes(tag.thingId));
 
@@ -42,6 +43,7 @@ export default function ElectionBanner({ aboutTags }: { aboutTags: Tag[] }) {
             src: iframeSrcAmp.replace('{service}', service),
             image:
               'https://news.files.bbci.co.uk/include/vjassets/img/app-launcher.png',
+            title: iframeTitle,
           }}
         />
       </aside>
@@ -55,7 +57,7 @@ export default function ElectionBanner({ aboutTags }: { aboutTags: Tag[] }) {
       css={styles.electionBannerWrapper}
     >
       <iframe
-        title="US Election results"
+        title={iframeTitle}
         src={iframeSrc.replace('{service}', service)}
         scrolling="no"
         css={styles.electionBannerIframe}