@windstream/react-shared-components 0.2.88 → 0.2.90

package/src/contentful/blocks/image-promo-bar/index.test.tsx

@@ -7,22 +7,42 @@ import { render, screen } from "@testing-library/react";
 jest.mock("../button", () => ({
   __esModule: true,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Button: ({ buttonLabel, disableAnimation, ...rest }: any) => (
-    <button
-      data-testid="cta-button"
-      data-disable-animation={String(disableAnimation)}
-    >
-      {buttonLabel || "CTA"}
-    </button>
-  ),
-  default: ({ buttonLabel, disableAnimation }: any) => (
-    <button
-      data-testid="cta-button"
-      data-disable-animation={String(disableAnimation)}
-    >
-      {buttonLabel || "CTA"}
-    </button>
-  ),
+  Button: ({
+    buttonLabel,
+    disableAnimation,
+    fieldProps,
+    preDefinedFunctionExecution,
+    renderCheckPlans,
+  }: any) =>
+    preDefinedFunctionExecution === "check availability" && renderCheckPlans ? (
+      renderCheckPlans()
+    ) : (
+      <button
+        data-testid="cta-button"
+        data-disable-animation={String(disableAnimation)}
+        {...fieldProps}
+      >
+        {buttonLabel || "CTA"}
+      </button>
+    ),
+  default: ({
+    buttonLabel,
+    disableAnimation,
+    fieldProps,
+    preDefinedFunctionExecution,
+    renderCheckPlans,
+  }: any) =>
+    preDefinedFunctionExecution === "check availability" && renderCheckPlans ? (
+      renderCheckPlans()
+    ) : (
+      <button
+        data-testid="cta-button"
+        data-disable-animation={String(disableAnimation)}
+        {...fieldProps}
+      >
+        {buttonLabel || "CTA"}
+      </button>
+    ),
 }));
 
 jest.mock("@shared/components/video-link", () => ({
@@ -63,8 +83,10 @@ jest.mock("@shared/components/next-image", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag className={className} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -94,6 +116,142 @@ const defaultProps: ImagePromoBarProps = {
 };
 
 describe("ImagePromoBar", () => {
+  it("tags block content, CTAs, disclaimers, checklist and image links", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+      "data-contentful-entry-id": "image-promo",
+      "data-contentful-locale": "en-US",
+    });
+    const { container } = render(
+      <ImagePromoBar
+        {...defaultProps}
+        brow="Brow"
+        title="Title"
+        subTitle="Subtitle"
+        description="Description"
+        checklist={["Check"]}
+        ctaDisclaimer="CTA disclaimer"
+        disclaimer="Disclaimer"
+        imageLinks={[
+          {
+            url: "/image",
+            image: "/image.png",
+            fieldProps: {
+              image: {
+                ...tag("image"),
+                "data-contentful-entry-id": "image-link-item",
+              },
+            },
+          },
+        ]}
+        cta={{
+          buttonLabel: "Primary",
+          fieldProps: { "data-contentful-field-id": "nestedPrimaryCta" },
+        }}
+        secondaryCta={{
+          buttonLabel: "Secondary",
+          fieldProps: { "data-contentful-field-id": "nestedSecondaryCta" },
+        }}
+        fieldProps={{
+          brow: tag("brow"),
+          title: tag("title"),
+          subTitle: tag("subTitle"),
+          description: tag("description"),
+          checklist: tag("checklist"),
+          ctaDisclaimer: tag("ctaDisclaimer"),
+          cta: tag("cta"),
+          secondaryCta: tag("secondaryCta"),
+          disclaimer: tag("disclaimer"),
+          imageLinks: tag("imageLinks"),
+        }}
+      />
+    );
+    [
+      "brow",
+      "title",
+      "subTitle",
+      "description",
+      "checklist",
+      "ctaDisclaimer",
+      "cta",
+      "secondaryCta",
+      "disclaimer",
+      "imageLinks",
+    ].forEach(field => {
+      expect(
+        container.querySelector(`[data-contentful-field-id="${field}"]`)
+      ).toHaveAttribute("data-contentful-entry-id", "image-promo");
+    });
+    expect(
+      container.querySelector(
+        '[data-contentful-entry-id="image-link-item"][data-contentful-field-id="image"]'
+      )
+    ).toBeInTheDocument();
+    expect(screen.getAllByTestId("cta-button")[0]).toHaveAttribute(
+      "data-contentful-field-id",
+      "nestedPrimaryCta"
+    );
+    expect(screen.getAllByTestId("cta-button")[1]).toHaveAttribute(
+      "data-contentful-field-id",
+      "nestedSecondaryCta"
+    );
+  });
+
+  it("applies block CTA tags to wrappers around custom check-plans content", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+      "data-contentful-entry-id": "image-promo",
+    });
+    const { container } = render(
+      <ImagePromoBar
+        {...defaultProps}
+        cta={{
+          preDefinedFunctionExecution: "check availability",
+          fieldProps: { "data-contentful-field-id": "primaryButton" },
+        }}
+        secondaryCta={{
+          preDefinedFunctionExecution: "check availability",
+          fieldProps: { "data-contentful-field-id": "secondaryButton" },
+        }}
+        renderCheckPlans={() => <button>Check availability</button>}
+        fieldProps={{
+          cta: tag("cta"),
+          secondaryCta: tag("secondaryCta"),
+        }}
+      />
+    );
+
+    const primaryWrapper = container.querySelector(".primary-cta");
+    const secondaryWrapper = container.querySelector(".secondary-cta");
+    expect(primaryWrapper).toHaveAttribute("data-contentful-field-id", "cta");
+    expect(secondaryWrapper).toHaveAttribute(
+      "data-contentful-field-id",
+      "secondaryCta"
+    );
+    expect(primaryWrapper).toHaveAttribute(
+      "data-contentful-entry-id",
+      "image-promo"
+    );
+    expect(secondaryWrapper).toHaveAttribute(
+      "data-contentful-entry-id",
+      "image-promo"
+    );
+    expect(primaryWrapper?.querySelector("button")).toHaveTextContent(
+      "Check availability"
+    );
+    expect(secondaryWrapper?.querySelector("button")).toHaveTextContent(
+      "Check availability"
+    );
+    expect(primaryWrapper?.querySelector("button")).not.toHaveAttribute(
+      "data-contentful-field-id",
+      "primaryButton"
+    );
+    expect(secondaryWrapper?.querySelector("button")).not.toHaveAttribute(
+      "data-contentful-field-id",
+      "secondaryButton"
+    );
+  });
+
   describe("Text content", () => {
     it("renders brow text when provided", () => {
       render(<ImagePromoBar {...defaultProps} brow="New" />);

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -37,6 +37,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   onVideoEvent,
   renderCheckPlans,
   enableAnimation = false,
+  fieldProps,
 }) => {
   const hasVideoLink = Boolean(videoLink);
 
@@ -56,6 +57,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 <Text
                   as="div"
                   className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
+                  {...fieldProps?.brow}
                 >
                   {brow}
                 </Text>
@@ -64,6 +66,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 <Text
                   as={enableHeading ? "h1" : "h2"}
                   className="heading2 xl:heading1"
+                  {...fieldProps?.title}
                 >
                   {title}
                 </Text>
@@ -72,6 +75,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 <Text
                   as={enableHeading ? "h2" : "h3"}
                   className="subheading3 mt-3 md:subheading1"
+                  {...fieldProps?.subTitle}
                 >
                   {subTitle}
                 </Text>
@@ -79,45 +83,54 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             </div>
             {/* Content Section */}
             {description && (
-              <Text as="div" className="body1">
+              <Text as="div" className="body1" {...fieldProps?.description}>
                 {description}
               </Text>
             )}
             {/* Checklist Rendering */}
             {checklist.length > 0 && (
-              <Checklist
-                items={checklist}
-                iconPosition="top"
-                iconSize={24}
-                listItemClassName="body1 text-text"
-                listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
-              />
+              <div {...fieldProps?.checklist}>
+                <Checklist
+                  items={checklist}
+                  iconPosition="top"
+                  iconSize={24}
+                  listItemClassName="body1 text-text"
+                  listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
+                />
+              </div>
+            )}
+            {ctaDisclaimer && (
+              <div {...fieldProps?.ctaDisclaimer}>{ctaDisclaimer}</div>
             )}
-            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
             {imageLinks.length > 0 && (
-              <div className="flex gap-4">
+              <div className="flex gap-4" {...fieldProps?.imageLinks}>
                 {/* Image Links Collection */}
-                {imageLinks?.map(
-                  (link: { url: string; image: string }, index: number) => (
-                    <div key={index} className="image-link w-[147px]">
-                      <Link
-                        variant="unstyled"
-                        href={link.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Image src={link.image} alt="icon-link" />
-                      </Link>
-                    </div>
-                  )
-                )}
+                {imageLinks?.map((link, index: number) => (
+                  <div
+                    key={index}
+                    className="image-link w-[147px]"
+                    {...link.fieldProps?.image}
+                  >
+                    <Link
+                      variant="unstyled"
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Image src={link.image} alt="icon-link" />
+                    </Link>
+                  </div>
+                ))}
               </div>
             )}
             {/* CTAs and Disclaimers */}
             {(cta || secondaryCta) && (
               <div className="flex w-full flex-col gap-4 xl:flex-row">
                 {cta && (
-                  <div className="primary-cta w-full xl:w-auto xl:shrink-0">
+                  <div
+                    className="primary-cta w-full xl:w-auto xl:shrink-0"
+                    {...fieldProps?.cta}
+                  >
                     <Button
                       {...cta}
                       // Block-level `enableAnimation` takes precedence:
@@ -134,11 +147,15 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                       onClick={(e: React.MouseEvent) => onClick?.(e, "primary")}
+                      fieldProps={cta.fieldProps}
                     />
                   </div>
                 )}
                 {secondaryCta && (
-                  <div className="secondary-cta w-full xl:w-auto xl:shrink-0">
+                  <div
+                    className="secondary-cta w-full xl:w-auto xl:shrink-0"
+                    {...fieldProps?.secondaryCta}
+                  >
                     <Button
                       {...secondaryCta}
                       // Block-level `enableAnimation` takes precedence:
@@ -158,6 +175,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       onClick={(e: React.MouseEvent) =>
                         onClick?.(e, "secondary")
                       }
+                      fieldProps={secondaryCta.fieldProps}
                     />
                   </div>
                 )}
@@ -209,7 +227,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
 
       {disclaimer && (
         <div className="mt-10 flex justify-center xl:mt-18">
-          <div>{disclaimer}</div>
+          <div {...fieldProps?.disclaimer}>{disclaimer}</div>
         </div>
       )}
     </div>

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -4,6 +4,7 @@ import {
   VideoAnalyticsHandler,
   VideoLinkProps,
 } from "@shared/components/video-link";
+import type { FieldProps } from "@shared/types/field-props";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export type ImagePromoBarProps = {
@@ -22,7 +23,11 @@ export type ImagePromoBarProps = {
   openDescriptionLinksOnANewTab: boolean;
   checklist: string[];
   disclaimer: React.ReactNode;
-  imageLinks: { url: string; image: string }[];
+  imageLinks: {
+    url: string;
+    image: string;
+    fieldProps?: FieldProps<"image">;
+  }[];
   cta: any;
   secondaryCta: any;
   ctaDisclaimer: React.ReactNode;
@@ -34,4 +39,17 @@ export type ImagePromoBarProps = {
   onModalButtonClick?: (id?: string) => void;
   onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** Consumer-supplied DOM attributes for the rendered content fields. */
+  fieldProps?: FieldProps<
+    | "brow"
+    | "title"
+    | "subTitle"
+    | "description"
+    | "checklist"
+    | "ctaDisclaimer"
+    | "cta"
+    | "secondaryCta"
+    | "disclaimer"
+    | "imageLinks"
+  >;
 };

package/src/contentful/blocks/primary-hero/index.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { PrimaryHero } from "./index";
 
+import { replaceTokens } from "@shared/utils/replace-tokens";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
@@ -26,8 +27,10 @@ jest.mock("@shared/components/next-image", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag className={className} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -80,10 +83,25 @@ describe("PrimaryHero", () => {
   });
 
   describe("Price section", () => {
+    const getPriceLockup = (container: HTMLElement) => {
+      const amount = container.querySelector("p.subheading5");
+      const lockup = amount?.parentElement;
+      const [dollarSign, , suffix] = Array.from(lockup?.children ?? []);
+      return { lockup, dollarSign, amount, suffix };
+    };
+
+    const textExposedToAssistiveTech = (container: HTMLElement) => {
+      const clone = container.cloneNode(true) as HTMLElement;
+      clone
+        .querySelectorAll('[aria-hidden="true"]')
+        .forEach(node => node.remove());
+      return clone.textContent ?? "";
+    };
+
     it("renders price with dollar sign", () => {
-      render(<PrimaryHero {...baseProps} price="49.99" />);
+      render(<PrimaryHero {...baseProps} price="49" />);
       expect(screen.getByText("$")).toBeInTheDocument();
-      expect(screen.getByText("49.99")).toBeInTheDocument();
+      expect(screen.getByText("49")).toBeInTheDocument();
     });
 
     it("renders priceSuffix when provided", () => {
@@ -117,6 +135,247 @@ describe("PrimaryHero", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByText("$")).not.toBeInTheDocument();
     });
+
+    it("keeps the whole-dollar authored lockup unchanged", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19" priceSuffix="99/mo*" />
+      );
+      const { lockup, dollarSign, amount, suffix } = getPriceLockup(container);
+
+      expect(lockup?.children).toHaveLength(3);
+      expect(dollarSign).toHaveTextContent(/^\$$/);
+      expect(dollarSign).toHaveClass("subheading1", "mt-0.5");
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix?.tagName).toBe("P");
+      expect(suffix).toHaveClass("subheading1", "mt-0.5");
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+      expect(suffix?.querySelector("span")).toBeNull();
+    });
+
+    it("renders decimal cents with the suffix so it matches the authored lockup", () => {
+      const authored = render(
+        <PrimaryHero {...baseProps} price="19" priceSuffix="99/mo*" />
+      );
+      const expected = getPriceLockup(authored.container);
+      const expectedLockup = {
+        amount: expected.amount?.textContent,
+        amountClass: expected.amount?.className,
+        suffix: expected.suffix?.textContent,
+        suffixClass: expected.suffix?.className,
+        count: expected.lockup?.children.length,
+      };
+      authored.unmount();
+
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19.99" priceSuffix="/mo*" />
+      );
+      const actual = getPriceLockup(container);
+
+      expect({
+        amount: actual.amount?.textContent,
+        amountClass: actual.amount?.className,
+        suffix: actual.suffix?.textContent,
+        suffixClass: actual.suffix?.className,
+        count: actual.lockup?.children.length,
+      }).toEqual(expectedLockup);
+      expect(screen.queryByText("19.99")).not.toBeInTheDocument();
+    });
+
+    it("renders a resolved price token like the authored production lockup", () => {
+      const tokens = [
+        { token: "price_fiber_300", value: "24.99", promo: "19.99" },
+      ];
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price={replaceTokens("${price_fiber_300}", tokens)}
+          priceSuffix={replaceTokens("/mo*", tokens)}
+          priceCallout="fiber plans|start at "
+        />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+      expect(screen.getByText("fiber plans")).toBeInTheDocument();
+      expect(screen.getByText("$19.99/mo*")).toHaveClass("sr-only");
+    });
+
+    it("renders decimal cents on their own when no suffix is provided", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="39.99" />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^39$/);
+      expect(suffix).toHaveClass("subheading1", "mt-0.5");
+      expect(suffix).toHaveTextContent(/^99$/);
+    });
+
+    it("splits prices with thousands separators", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="1,299.50" priceSuffix="/yr" />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^1,299$/);
+      expect(suffix).toHaveTextContent(/^50\/yr$/);
+    });
+
+    it.each(["Free", "$19.99", "19.", ".99"])(
+      "renders non-decimal price %p verbatim",
+      price => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix="/mo" />
+        );
+        const { amount, suffix } = getPriceLockup(container);
+
+        expect(amount?.textContent).toBe(price);
+        expect(suffix).toHaveTextContent(/^\/mo$/);
+      }
+    );
+
+    it.each([
+      ["price", { price: "${price_tier3_2gig}" }],
+      ["priceSuffix", { price: "19", priceSuffix: "${price_suffix}" }],
+      ["priceCallout", { price: "19", priceCallout: "save $${reward_x}" }],
+    ])("hides the price lockup when %s has an unresolved token", (_, props) => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          priceSuffix="/mo*"
+          priceCallout="fiber plans|start at "
+          {...props}
+        />
+      );
+
+      expect(container.querySelector("p.subheading5")).toBeNull();
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+      expect(screen.queryByText("fiber plans")).not.toBeInTheDocument();
+      expect(container.textContent).not.toContain("${");
+    });
+
+    it.each(["99/mo*", " 99/mo*", "99"])(
+      "does not repeat cents already leading the suffix %p",
+      priceSuffix => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price="59.99" priceSuffix={priceSuffix} />
+        );
+        const { amount, suffix } = getPriceLockup(container);
+
+        expect(amount).toHaveTextContent(/^59$/);
+        expect(suffix?.textContent).toBe(priceSuffix);
+        expect(suffix?.querySelector("span")).toBeNull();
+      }
+    );
+
+    it.each([
+      ["59.49", "99/mo*", "4999/mo*"],
+      ["19.99", "990/mo", "99990/mo"],
+    ])(
+      "keeps the cents when %p has a suffix %p that does not lead with them",
+      (price, priceSuffix, expected) => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix={priceSuffix} />
+        );
+        const { suffix } = getPriceLockup(container);
+
+        expect(suffix?.textContent).toBe(expected);
+      }
+    );
+
+    it("tags split cents with the price field and the suffix with the priceSuffix field", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price="19.99"
+          priceSuffix="/mo*"
+          fieldProps={{
+            price: { "data-field": "price" },
+            priceSuffix: { "data-field": "priceSuffix" },
+          }}
+        />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+      const cents = suffix?.querySelector("span");
+
+      expect(amount).toHaveAttribute("data-field", "price");
+      expect(suffix).toHaveAttribute("data-field", "priceSuffix");
+      expect(cents).toHaveAttribute("data-field", "price");
+      expect(cents).toHaveTextContent(/^99$/);
+    });
+
+    it.each([
+      ["19.99", "/mo*", "$19.99/mo*"],
+      ["59.99", "99/mo*", "$59.99/mo*"],
+      ["59.99", " 99/mo*", "$59.99/mo*"],
+      ["39.99", undefined, "$39.99"],
+      ["1,299.50", "/yr", "$1,299.50/yr"],
+      ["19.99", " per month", "$19.99 per month"],
+      ["59.49", "99/mo*", "$59.49 99/mo*"],
+    ])(
+      "exposes %p + %p to assistive technology as %p only once",
+      (price, priceSuffix, expected) => {
+        const { container } = render(
+          <PrimaryHero
+            {...baseProps}
+            price={price}
+            priceSuffix={priceSuffix}
+            priceCallout="fiber plans|start at "
+          />
+        );
+        const { lockup } = getPriceLockup(container);
+        const accessibleText = textExposedToAssistiveTech(container);
+
+        expect(screen.getByText(expected)).toHaveClass("sr-only");
+        expect(lockup).toHaveAttribute("aria-hidden", "true");
+        expect(accessibleText).toContain(expected);
+        expect(accessibleText.replace(expected, "")).not.toMatch(/\d/);
+      }
+    );
+
+    it("keeps the split visual fragments in the DOM for crawlers", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19.99" priceSuffix="/mo*" />
+      );
+      const { dollarSign, amount, suffix } = getPriceLockup(container);
+
+      expect(dollarSign).toBeInTheDocument();
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+    });
+
+    it.each([
+      ["19", "99/mo*"],
+      ["Free", "/mo"],
+      ["19.", "/mo"],
+    ])(
+      "leaves the unsplit lockup %p + %p exposed to assistive technology as before",
+      (price, priceSuffix) => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix={priceSuffix} />
+        );
+        const { lockup } = getPriceLockup(container);
+
+        expect(container.querySelector(".sr-only")).toBeNull();
+        expect(lockup).not.toHaveAttribute("aria-hidden");
+        expect(textExposedToAssistiveTech(container)).toContain(
+          `$${price}${priceSuffix}`
+        );
+      }
+    );
+
+    it("does not expose an accessible price when the lockup is hidden", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price="${price_tier3_2gig}"
+          priceSuffix="/mo*"
+        />
+      );
+
+      expect(container.querySelector(".sr-only")).toBeNull();
+    });
   });
 
   describe("Checklist", () => {