From cf2d40b61e4cecad5074e285c9d438b9f0123ec0 Mon Sep 17 00:00:00 2001
From: Sherakama <sheamck@stanford.edu>
Date: Thu, 5 Sep 2024 13:59:59 -0700
Subject: [PATCH] NoJira: Add embed label if there is one to the typeform
 iframe. (#341)

* NoJira: Add embed label if there is one to the typeform iframe.

* Update components/Storyblok/SbTypeform.tsx

Co-authored-by: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com>

---------

Co-authored-by: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com>
---
 components/Storyblok/SbTypeform.tsx | 10 ++++++++++
 components/TypeForm/Widget.tsx      |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/Storyblok/SbTypeform.tsx b/components/Storyblok/SbTypeform.tsx
index 63e3f465..92a247ce 100644
--- a/components/Storyblok/SbTypeform.tsx
+++ b/components/Storyblok/SbTypeform.tsx
@@ -13,6 +13,7 @@ export type SbTypeformProps = {
     id: string;
     autoFocus: false;
     component: string;
+    embedLabel?: string;
     embedType: 'slider' | 'popup' | 'popover' | 'sidetab' | 'widget';
     autoResize: boolean;
     fullScreen: boolean;
@@ -42,6 +43,7 @@ export const SbTypeform = ({
   const {
     id,
     autoFocus,
+    embedLabel = '',
     embedType,
     autoResize,
     fullScreen,
@@ -62,6 +64,9 @@ export const SbTypeform = ({
   const height = parseInt(embedHeight, 10);
   const resize = autoResize || !height;
   const opacity = transparent ? 0 : 100;
+  const iframeProps = {
+    ariaLabel: embedLabel ? embedLabel : undefined,
+  };
 
   switch (embedType) {
     case 'slider': {
@@ -81,6 +86,7 @@ export const SbTypeform = ({
             hideHeaders={hideHeader}
             transitiveSearchParams={transitiveParams}
             displayAsFullScreenModal={displayAsFullScreenModal}
+            iframeProps={iframeProps}
           >
             <span className={styles.fauxCTA}>{buttonLabel}</span>
           </Slider>
@@ -102,6 +108,7 @@ export const SbTypeform = ({
           displayAsFullScreenModal={displayAsFullScreenModal}
           autoResize={resize}
           height={!resize ? embedHeight : undefined}
+          iframeProps={iframeProps}
         />
       );
     }
@@ -120,6 +127,7 @@ export const SbTypeform = ({
           displayAsFullScreenModal={displayAsFullScreenModal}
           autoResize={resize}
           height={!resize ? embedHeight : undefined}
+          iframeProps={iframeProps}
         />
       );
     }
@@ -144,6 +152,7 @@ export const SbTypeform = ({
             autoResize={resize}
             height={!resize ? embedHeight : undefined}
             className={styles.fauxCTA}
+            iframeProps={iframeProps}
           >
             {buttonLabel}
           </PopUp>
@@ -173,6 +182,7 @@ export const SbTypeform = ({
             opacity={opacity}
             height={!resize ? embedHeight : undefined}
             className='w-full'
+            iframeProps={iframeProps}
           />
         </Container>
       );
diff --git a/components/TypeForm/Widget.tsx b/components/TypeForm/Widget.tsx
index 0768c480..101e45c9 100644
--- a/components/TypeForm/Widget.tsx
+++ b/components/TypeForm/Widget.tsx
@@ -14,4 +14,4 @@ const Widget = ({
   return <TypeFormWidget noHeading keepSession id={id} className={cnb(className)} {...rest} />;
 };
 
-export { Widget };
\ No newline at end of file
+export { Widget };