@windstream/react-shared-components 0.2.65 → 0.2.67

package/src/components/video-link/index.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { VideoLink } from "./index";
+import * as VideoLinkBarrel from "./index";
 
 import { fireEvent, render, screen } from "@testing-library/react";
 
@@ -23,6 +24,7 @@ jest.mock("./vimeo-embed", () => ({
 jest.mock("./youtube-embed", () => ({
   YoutubeEmbed: ({
     link,
+    title,
     autoplay,
     onPlay,
     onPause,
@@ -30,7 +32,12 @@ jest.mock("./youtube-embed", () => ({
     onEnded,
     onFullscreenToggle,
   }: any) => (
-    <div data-testid="youtube-embed" data-link={link} data-autoplay={autoplay}>
+    <div
+      data-testid="youtube-embed"
+      data-link={link}
+      data-title={title}
+      data-autoplay={autoplay}
+    >
       <button data-testid="yt-play" onClick={() => onPlay?.()} />
       <button data-testid="yt-pause" onClick={() => onPause?.()} />
       <button data-testid="yt-ended" onClick={() => onEnded?.()} />
@@ -101,6 +108,22 @@ describe("VideoLink", () => {
     expect(screen.queryByTestId("play-button")).not.toBeInTheDocument();
   });
 
+  it("renders the fallback poster using the original aspect ratio and custom dimensions", () => {
+    render(
+      <VideoLink
+        videoLink={{ image: "thumb.jpg" }}
+        useOriginalImageAspectRatio={true}
+        imageWidth={800}
+        imageHeight={450}
+      />
+    );
+    expect(screen.getByAltText("section-image")).toHaveAttribute(
+      "src",
+      "thumb.jpg"
+    );
+    expect(screen.queryByTestId("play-button")).not.toBeInTheDocument();
+  });
+
   it("ignores an unrelated fallbackImage-like prop - only videoLink.image is used as the poster", () => {
     const { container } = render(
       // @ts-expect-error - fallbackImage is intentionally not a supported prop
@@ -436,3 +459,96 @@ describe("VideoLink analytics", () => {
     expect(progressCalls).toHaveLength(1);
   });
 });
+
+describe("VideoLink accessibility & SEO", () => {
+  const baseVideoLink = {
+    link: "https://youtube.com/watch?v=123",
+    image: "thumb.jpg",
+    title: "eero Pro 7 Introduction Video",
+  };
+
+  it("uses the video title in the preview image alt text", () => {
+    render(<VideoLink videoLink={baseVideoLink} />);
+    expect(
+      screen.getByAltText("eero Pro 7 Introduction Video video preview")
+    ).toBeInTheDocument();
+  });
+
+  it("falls back to generic preview alt text when no title is provided", () => {
+    render(
+      <VideoLink
+        videoLink={{ link: "https://youtube.com/watch?v=123", image: "t.jpg" }}
+      />
+    );
+    expect(screen.getByAltText("Video preview")).toBeInTheDocument();
+  });
+
+  it("exposes the section as a labelled button for keyboard/AT users on page load", () => {
+    const { container } = render(<VideoLink videoLink={baseVideoLink} />);
+    const section = container.querySelector(".video-section")!;
+    expect(section).toHaveAttribute("role", "button");
+    expect(section).toHaveAttribute("tabindex", "0");
+    expect(section).toHaveAttribute(
+      "aria-label",
+      "Play video: eero Pro 7 Introduction Video"
+    );
+  });
+
+  it("hides the decorative play button from the accessibility tree", () => {
+    render(<VideoLink videoLink={baseVideoLink} />);
+    const playButton = screen.getByTestId("play-button");
+    expect(playButton.parentElement).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("starts playback when Enter is pressed on the section", () => {
+    const { container } = render(<VideoLink videoLink={baseVideoLink} />);
+    fireEvent.keyDown(container.querySelector(".video-section")!, {
+      key: "Enter",
+    });
+    expect(screen.getByTestId("youtube-embed")).toHaveAttribute(
+      "data-autoplay",
+      "true"
+    );
+  });
+
+  it("starts playback when Space is pressed on the section", () => {
+    const { container } = render(<VideoLink videoLink={baseVideoLink} />);
+    fireEvent.keyDown(container.querySelector(".video-section")!, {
+      key: " ",
+    });
+    expect(screen.getByTestId("youtube-embed")).toHaveAttribute(
+      "data-autoplay",
+      "true"
+    );
+  });
+
+  it("drops button semantics from the section once the video is playing", () => {
+    const { container } = render(<VideoLink videoLink={baseVideoLink} />);
+    clickVideoSection(container);
+    const section = container.querySelector(".video-section")!;
+    expect(section).not.toHaveAttribute("role");
+    expect(section).not.toHaveAttribute("tabindex");
+  });
+
+  it("passes the video title through to the youtube embed", () => {
+    render(<VideoLink videoLink={baseVideoLink} />);
+    // The embed mock is mounted up-front for SEO even before play.
+    expect(screen.getByTestId("youtube-embed")).toHaveAttribute(
+      "data-title",
+      "eero Pro 7 Introduction Video"
+    );
+  });
+});
+
+describe("VideoLink public exports", () => {
+  it("re-exports the embed building blocks and helpers from the barrel", () => {
+    expect(VideoLinkBarrel.VideoLink).toBeDefined();
+    expect(VideoLinkBarrel.default).toBe(VideoLinkBarrel.VideoLink);
+    expect(VideoLinkBarrel.ContentfulVideoEmbed).toBeDefined();
+    expect(VideoLinkBarrel.PlayButton).toBeDefined();
+    expect(VideoLinkBarrel.VimeoEmbed).toBeDefined();
+    expect(VideoLinkBarrel.getVimeoEmbedId).toBeDefined();
+    expect(VideoLinkBarrel.YoutubeEmbed).toBeDefined();
+    expect(VideoLinkBarrel.getYoutubeEmbedId).toBeDefined();
+  });
+});

package/src/components/video-link/index.tsx

@@ -107,6 +107,25 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
     setActiveVideo("");
   };
 
+  // Handle keydown events for accessibility (Enter or Space to play)
+  const handleSectionKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (isPlaying) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      handlePlayClick();
+    }
+  };
+
+  // Descriptive labels for crawlers/assistive tech, readable on page load
+  const videoTitle =
+    typeof videoLink?.title === "string" ? videoLink.title.trim() : "";
+  const previewAltText = videoTitle
+    ? `${videoTitle} video preview`
+    : "Video preview";
+  const sectionAriaLabel = videoTitle
+    ? `Play video: ${videoTitle}`
+    : "Play video";
+
   const embedSelector = () => {
     const analyticsProps = {
       onPlay: () => videoAnalytics.handlePlay(analyticsMeta),
@@ -140,6 +159,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
         <VimeoEmbed
           key={playbackKey}
           link={videoHref}
+          title={videoLink?.title}
           autoplay={isPlaying}
           {...analyticsProps}
         />
@@ -149,6 +169,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
       <YoutubeEmbed
         key={playbackKey}
         link={videoHref}
+        title={videoLink?.title}
         autoplay={isPlaying}
         {...analyticsProps}
       />
@@ -161,11 +182,16 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
       <div
         className={cx(
           "video-section relative w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
           !isPlaying && "hover:ring-2 hover:ring-border-focus"
         )}
         onClick={handlePlayClick}
+        onKeyDown={handleSectionKeyDown}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
+        role={!isPlaying ? "button" : undefined}
+        tabIndex={!isPlaying ? 0 : undefined}
+        aria-label={!isPlaying ? sectionAriaLabel : undefined}
       >
         {/* Preview Image & Play Button */}
         <div
@@ -178,14 +204,17 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
           {posterImage && (
             <NextImage
               src={posterImage}
-              alt="Video preview"
+              alt={previewAltText}
               width={imageWidth || 660}
               height={imageHeight || 660}
               sizes="(max-width: 430px) 100vw, (max-width: 834px) 100vw, 50vw"
               className="h-auto w-full rounded-image"
             />
           )}
-          <div className="absolute inset-0 flex items-center justify-center">
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 flex items-center justify-center"
+          >
             <PlayButton isHovered={isHovered} />
           </div>
         </div>

package/src/components/video-link/vimeo-embed.analytics.test.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { getVimeoEmbedId, VimeoEmbed } from "./vimeo-embed";
+
+import { render } from "@testing-library/react";
+import Player from "@vimeo/player";
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+jest.mock("@vimeo/player", () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const handlers: Record<string, (...args: any[]) => void> = {};
+const mockOn = jest.fn((event: string, cb: (...args: any[]) => void) => {
+  handlers[event] = cb;
+});
+const mockOff = jest.fn();
+const mockDestroy = jest.fn(() => Promise.resolve());
+
+describe("VimeoEmbed analytics", () => {
+  beforeEach(() => {
+    Object.keys(handlers).forEach(key => delete handlers[key]);
+    mockOn.mockClear();
+    mockOff.mockClear();
+    mockDestroy.mockClear();
+    (Player as unknown as jest.Mock).mockImplementation(() => ({
+      on: mockOn,
+      off: mockOff,
+      destroy: mockDestroy,
+    }));
+  });
+
+  it("forwards player events to the analytics callbacks", () => {
+    const onPlay = jest.fn();
+    const onPause = jest.fn();
+    const onEnded = jest.fn();
+    const onTimeUpdate = jest.fn();
+    const onFullscreenToggle = jest.fn();
+
+    render(
+      <VimeoEmbed
+        link="https://vimeo.com/123456789"
+        onPlay={onPlay}
+        onPause={onPause}
+        onEnded={onEnded}
+        onTimeUpdate={onTimeUpdate}
+        onFullscreenToggle={onFullscreenToggle}
+      />
+    );
+
+    handlers.play();
+    handlers.pause();
+    handlers.ended();
+    handlers.timeupdate({ seconds: 5, duration: 10 });
+    handlers.fullscreenchange({ fullscreen: true });
+
+    expect(onPlay).toHaveBeenCalledTimes(1);
+    expect(onPause).toHaveBeenCalledTimes(1);
+    expect(onEnded).toHaveBeenCalledTimes(1);
+    expect(onTimeUpdate).toHaveBeenCalledWith(5, 10);
+    expect(onFullscreenToggle).toHaveBeenCalledWith(true);
+  });
+
+  it("does not throw when events fire without analytics callbacks", () => {
+    render(<VimeoEmbed link="https://vimeo.com/123456789" />);
+    expect(() => {
+      handlers.play();
+      handlers.pause();
+      handlers.ended();
+      handlers.timeupdate({ seconds: 1, duration: 2 });
+      handlers.fullscreenchange({ fullscreen: false });
+    }).not.toThrow();
+  });
+
+  it("detaches every listener and destroys the player on unmount", () => {
+    const { unmount } = render(
+      <VimeoEmbed link="https://vimeo.com/123456789" />
+    );
+    expect(mockOn).toHaveBeenCalledTimes(5);
+
+    unmount();
+
+    expect(mockOff).toHaveBeenCalledTimes(5);
+    expect(mockDestroy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not instantiate a player for an invalid vimeo link", () => {
+    (Player as unknown as jest.Mock).mockClear();
+    render(<VimeoEmbed link="https://example.com/notavideo" />);
+    expect(Player as unknown as jest.Mock).not.toHaveBeenCalled();
+  });
+});
+
+describe("getVimeoEmbedId", () => {
+  it("returns an empty string for a missing link", () => {
+    expect(getVimeoEmbedId()).toBe("");
+    expect(getVimeoEmbedId("")).toBe("");
+  });
+
+  it("extracts the id from a standard vimeo url", () => {
+    expect(getVimeoEmbedId("https://vimeo.com/123456789")).toBe("123456789");
+  });
+
+  it("extracts the id and hash from a url with a private hash", () => {
+    expect(getVimeoEmbedId("https://vimeo.com/123456789/abcdef")).toBe(
+      "123456789/abcdef"
+    );
+  });
+});

package/src/components/video-link/vimeo-embed.test.tsx

@@ -23,6 +23,19 @@ describe("VimeoEmbed", () => {
       expect(container.innerHTML).toBe("");
     });
 
+    it("uses the video title as the iframe title when provided", () => {
+      render(
+        <VimeoEmbed
+          link="https://vimeo.com/123456789"
+          title="Wi-Fi Manager Walkthrough"
+        />
+      );
+      expect(
+        screen.getByTitle("Wi-Fi Manager Walkthrough")
+      ).toBeInTheDocument();
+      expect(screen.queryByTitle("Embedded vimeo")).not.toBeInTheDocument();
+    });
+
     it("renders null when link is undefined", () => {
       const { container } = render(<VimeoEmbed link={undefined} />);
       expect(container.innerHTML).toBe("");

package/src/components/video-link/vimeo-embed.tsx

@@ -36,6 +36,7 @@ export const getVimeoEmbedId = (link?: string): string => {
 export const VimeoEmbed: React.FC<VideoEmbedProps> = props => {
   const {
     link,
+    title,
     containerClassName,
     autoplay = false,
     debug = false,
@@ -122,7 +123,7 @@ export const VimeoEmbed: React.FC<VideoEmbedProps> = props => {
         allow="autoplay; fullscreen; picture-in-picture"
         allowFullScreen={true}
         referrerPolicy="strict-origin-when-cross-origin"
-        title="Embedded vimeo"
+        title={title || "Embedded vimeo"}
       />
     </div>
   );

package/src/components/video-link/youtube-embed.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { getYoutubeEmbedId, YoutubeEmbed } from "./youtube-embed";
+import { loadYoutubeIframeApi } from "./youtube-iframe-api-loader";
 
 import { render, screen, waitFor } from "@testing-library/react";
 
@@ -13,16 +14,22 @@ let capturedVideoId: string | undefined;
 let capturedPlayerVars: any;
 
 jest.mock("./youtube-iframe-api-loader", () => ({
-  loadYoutubeIframeApi: () =>
+  loadYoutubeIframeApi: jest.fn(() =>
     Promise.resolve({
       PlayerState: { PLAYING: 1, PAUSED: 2, ENDED: 0 },
       Player: jest.fn().mockImplementation((_el, options) => {
         capturedEvents = options.events;
         capturedVideoId = options.videoId;
         capturedPlayerVars = options.playerVars;
-        return { playVideo: mockPlayVideo, destroy: jest.fn() };
+        return {
+          playVideo: mockPlayVideo,
+          destroy: jest.fn(),
+          getDuration: () => 120,
+          getCurrentTime: () => 30,
+        };
       }),
-    }),
+    })
+  ),
 }));
 
 describe("getYoutubeEmbedId", () => {
@@ -71,6 +78,19 @@ describe("YoutubeEmbed", () => {
     expect(screen.getByTitle("Embedded youtube")).toBeInTheDocument();
   });
 
+  it("uses the video title as the iframe title when provided", () => {
+    render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        title="eero Pro 7 Introduction Video"
+      />
+    );
+    expect(
+      screen.getByTitle("eero Pro 7 Introduction Video")
+    ).toBeInTheDocument();
+    expect(screen.queryByTitle("Embedded youtube")).not.toBeInTheDocument();
+  });
+
   it("renders a real iframe whose src carries the videoId, enablejsapi and autoplay/mute off by default", () => {
     render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
     const iframe = screen.getByTitle("Embedded youtube") as HTMLIFrameElement;
@@ -115,6 +135,45 @@ describe("YoutubeEmbed", () => {
     expect(onEnded).toHaveBeenCalled();
   });
 
+  it("emits timeupdate progress on an interval while playing", async () => {
+    const onTimeUpdate = jest.fn();
+    render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        onTimeUpdate={onTimeUpdate}
+      />
+    );
+    await waitFor(() => expect(capturedEvents).toBeDefined());
+
+    jest.useFakeTimers();
+    try {
+      capturedEvents.onStateChange({ data: 1 }); // PLAYING -> starts interval
+      jest.advanceTimersByTime(1000);
+      expect(onTimeUpdate).toHaveBeenCalledWith(30, 120);
+
+      // Pausing clears the interval, so no further ticks are reported.
+      onTimeUpdate.mockClear();
+      capturedEvents.onStateChange({ data: 2 }); // PAUSED
+      jest.advanceTimersByTime(3000);
+      expect(onTimeUpdate).not.toHaveBeenCalled();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it("destroys the player on unmount", async () => {
+    const { unmount } = render(
+      <YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+    );
+    await waitFor(() => expect(capturedEvents).toBeDefined());
+    const loader = loadYoutubeIframeApi as jest.Mock;
+    const api = await loader.mock.results[loader.mock.results.length - 1].value;
+    const destroy = (api.Player as jest.Mock).mock.results[0].value.destroy;
+    expect(destroy).not.toHaveBeenCalled();
+    unmount();
+    expect(destroy).toHaveBeenCalledTimes(1);
+  });
+
   it("applies containerClassName", () => {
     const { container } = render(
       <YoutubeEmbed
@@ -132,4 +191,17 @@ describe("YoutubeEmbed", () => {
     });
     expect(capturedVideoId).toBeUndefined();
   });
+
+  it("still renders the iframe when the IFrame API fails to load", async () => {
+    (loadYoutubeIframeApi as jest.Mock).mockRejectedValueOnce(
+      new Error("network down")
+    );
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+
+    // The API never initialises, but the iframe is still present so the video
+    // can play on its own.
+    const iframe = await screen.findByTitle("Embedded youtube");
+    expect(iframe).toBeInTheDocument();
+    expect(capturedEvents).toBeUndefined();
+  });
 });

package/src/components/video-link/youtube-embed.tsx

@@ -26,6 +26,7 @@ export const getYoutubeEmbedId = (link?: string): string => {
 export const YoutubeEmbed: React.FC<Props> = props => {
   const {
     link,
+    title,
     containerClassName,
     autoplay = false,
     onPlay,
@@ -117,7 +118,7 @@ export const YoutubeEmbed: React.FC<Props> = props => {
         ref={iframeRef}
         className="absolute left-0 top-0 h-full w-full"
         src={src}
-        title="Embedded youtube"
+        title={title || "Embedded youtube"}
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen={true}
         referrerPolicy="strict-origin-when-cross-origin"

package/src/components/video-link/youtube-iframe-api-loader.test.ts

@@ -0,0 +1,108 @@
+describe("loadYoutubeIframeApi", () => {
+  const API_SRC = 'script[src*="youtube.com/iframe_api"]';
+
+  const importLoader = () =>
+    require("./youtube-iframe-api-loader")
+      .loadYoutubeIframeApi as () => Promise<any>;
+
+  beforeEach(() => {
+    jest.resetModules();
+    document.head.innerHTML = "";
+    delete (window as any).YT;
+    delete (window as any).onYouTubeIframeAPIReady;
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = "";
+    delete (window as any).YT;
+    delete (window as any).onYouTubeIframeAPIReady;
+  });
+
+  it("resolves immediately when the API is already loaded", async () => {
+    (window as any).YT = { Player: function () {} };
+    const loadYoutubeIframeApi = importLoader();
+
+    await expect(loadYoutubeIframeApi()).resolves.toBe((window as any).YT);
+    // Already available, so it must not inject a script.
+    expect(document.querySelector(API_SRC)).toBeNull();
+  });
+
+  it("injects the API script and resolves when onYouTubeIframeAPIReady fires", async () => {
+    const loadYoutubeIframeApi = importLoader();
+    const promise = loadYoutubeIframeApi();
+
+    const script = document.querySelector<HTMLScriptElement>(API_SRC);
+    expect(script).not.toBeNull();
+    expect(script!.src).toContain("https://www.youtube.com/iframe_api");
+
+    (window as any).YT = { Player: function () {} };
+    (window as any).onYouTubeIframeAPIReady();
+
+    await expect(promise).resolves.toBe((window as any).YT);
+  });
+
+  it("chains a pre-existing onYouTubeIframeAPIReady callback", async () => {
+    const previous = jest.fn();
+    (window as any).onYouTubeIframeAPIReady = previous;
+
+    const loadYoutubeIframeApi = importLoader();
+    const promise = loadYoutubeIframeApi();
+
+    (window as any).YT = { Player: function () {} };
+    (window as any).onYouTubeIframeAPIReady();
+
+    await promise;
+    expect(previous).toHaveBeenCalledTimes(1);
+  });
+
+  it("caches the promise and injects only one script across calls", () => {
+    const loadYoutubeIframeApi = importLoader();
+    const first = loadYoutubeIframeApi();
+    const second = loadYoutubeIframeApi();
+
+    expect(second).toBe(first);
+    expect(document.querySelectorAll(API_SRC)).toHaveLength(1);
+  });
+
+  it("reuses an existing API script tag instead of appending another", () => {
+    const existing = document.createElement("script");
+    existing.src = "https://www.youtube.com/iframe_api";
+    document.head.appendChild(existing);
+
+    const loadYoutubeIframeApi = importLoader();
+    loadYoutubeIframeApi();
+
+    expect(document.querySelectorAll(API_SRC)).toHaveLength(1);
+  });
+
+  it("rejects and allows a retry when the script fails to load", async () => {
+    const loadYoutubeIframeApi = importLoader();
+    const promise = loadYoutubeIframeApi();
+
+    const script = document.querySelector<HTMLScriptElement>(API_SRC)!;
+    script.onerror!(new Event("error"));
+
+    await expect(promise).rejects.toThrow("Failed to load YouTube IFrame API");
+
+    // The cached promise is cleared, so a later call starts a fresh attempt.
+    document.head.innerHTML = "";
+    const retry = loadYoutubeIframeApi();
+    expect(retry).not.toBe(promise);
+    expect(document.querySelector(API_SRC)).not.toBeNull();
+  });
+
+  it("rejects outside a browser (no window)", async () => {
+    const originalWindow = global.window;
+    // @ts-expect-error - simulate a server-side (non-browser) environment
+    delete global.window;
+    try {
+      jest.resetModules();
+      const loadYoutubeIframeApi = importLoader();
+      await expect(loadYoutubeIframeApi()).rejects.toThrow(
+        "YouTube IFrame API requires a browser"
+      );
+    } finally {
+      global.window = originalWindow;
+    }
+  });
+});

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -185,7 +185,7 @@ const CartRetentionBanner: React.FC<{
         )}
       <div
         className={cx(
-          "flex w-full pt-5",
+          "flex w-full pt-5 md:px-4",
           hasSideImage ? "justify-center md:justify-start" : "justify-center"
         )}
       >
@@ -286,7 +286,11 @@ const CartRetentionBanner: React.FC<{
         {hasSideImage ? (
           wrappedBodyContent
         ) : (
-          <div className="pop-up-body mb-5 w-full">{wrappedBodyContent}</div>
+          // overflow-x:clip contains the CTA hover-scale (keeps overflow-y);
+          // px keeps the full-width button off the modal border.
+          <div className="pop-up-body mb-5 w-full [overflow-x:clip] px-3 md:px-6">
+            {wrappedBodyContent}
+          </div>
         )}
       </Modal>
     </section>

package/src/contentful/blocks/email-input-block/index.test.tsx

@@ -32,24 +32,24 @@ describe("EmailInputBlock", () => {
       render(<EmailInputBlock {...defaultProps} title="Join us" />);
       const title = screen.getByText("Join us");
       expect(title).toBeInTheDocument();
-      expect(title.tagName).toBe("H1");
+      expect(title.tagName).toBe("H2");
     });
 
     it("does not render title when not provided", () => {
       const { container } = render(<EmailInputBlock {...defaultProps} />);
-      expect(container.querySelector("h1")).not.toBeInTheDocument();
+      expect(container.querySelector("h2")).not.toBeInTheDocument();
     });
 
     it("renders subTitle when provided", () => {
       render(<EmailInputBlock {...defaultProps} subTitle="Stay updated" />);
       const subtitle = screen.getByText("Stay updated");
       expect(subtitle).toBeInTheDocument();
-      expect(subtitle.tagName).toBe("H2");
+      expect(subtitle.tagName).toBe("H3");
     });
 
     it("does not render subTitle when not provided", () => {
       const { container } = render(<EmailInputBlock {...defaultProps} />);
-      expect(container.querySelector("h2")).not.toBeInTheDocument();
+      expect(container.querySelector("h3")).not.toBeInTheDocument();
     });
 
     it("renders emailInputDescription when provided", () => {

package/src/contentful/blocks/email-input-block/index.tsx

@@ -111,12 +111,12 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
         <div className="w-full">
           <div className="lg:w-[548px]">
             {title && (
-              <h1 className={`mb-3 text-[2.25rem] leading-[2.5rem] font-black md:text-heading1 md:font-black ${textColor}`}>{title}</h1>
+              <h2 className={`mb-3 text-[2.25rem] leading-[2.5rem] font-black md:text-heading1 md:font-black ${textColor}`}>{title}</h2>
             )}
             {subTitle && (
-              <h2 className={`mb-3 text-heading1 font-black ${textColor}`}>
+              <h3 className={`mb-3 text-heading1 font-black ${textColor}`}>
                 {subTitle}
-              </h2>
+              </h3>
             )}
 
             {emailInputDescription && (