From 3a7c4ad7875541034b11ca123038aafeadef152b Mon Sep 17 00:00:00 2001
From: Chai Pin Zheng <chaipinzheng@gmail.com>
Date: Tue, 23 Jun 2026 20:35:01 +0700
Subject: [PATCH] =?UTF-8?q?fix(pricing):=20review-nit=20polish=20=E2=80=94?=
 =?UTF-8?q?=20link=20validation,=20decorative=20icons,=20split=20highlight?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three polish fixes from the pricing-family code review. All visually neutral,
so the just-minted (#193) Linux baselines stay valid.

- PricingEnterprise: validate the logo `href` so non-http(s) values (e.g. a
  `javascript:` payload) are rejected. Inlined rather than reusing
  shared/safeUrls — the embed/form validators there would wrongly reject
  arbitrary customer URLs.
- Mark the decorative feature-list `<Check>` icons aria-hidden across all five
  variants so screen readers don't announce them.
- PricingSplit: derive the highlighted (right) plan from the `featured` flag
  instead of hard-coding plans[1], so marking either plan featured works.
  Mirrored in the PricingSplitDemo twin.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../source/blocks/PricingCards/Component.tsx     |  2 +-
 .../source/blocks/PricingCardsCta/Component.tsx  |  2 +-
 .../blocks/PricingCardsMuted/Component.tsx       |  2 +-
 .../blocks/PricingEnterprise/Component.tsx       |  2 +-
 .../source/blocks/PricingEnterprise/config.ts    | 16 ++++++++++++++++
 .../source/blocks/PricingSplit/Component.tsx     | 10 ++++++----
 src/components/site/demos/PricingSplitDemo.tsx   |  4 ++--
 7 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/payload-components/source/blocks/PricingCards/Component.tsx b/payload-components/source/blocks/PricingCards/Component.tsx
index 58f7d99..3082c85 100644
--- a/payload-components/source/blocks/PricingCards/Component.tsx
+++ b/payload-components/source/blocks/PricingCards/Component.tsx
@@ -90,7 +90,7 @@ export const PricingCardsBlock: React.FC<Props> = ({
                             key={item.id ?? `${item.feature}-${featureIndex}`}
                             className="flex items-center gap-2"
                           >
-                            <Check className="size-3" />
+                            <Check aria-hidden="true" className="size-3" />
                             {item.feature}
                           </li>
                         ))}
diff --git a/payload-components/source/blocks/PricingCardsCta/Component.tsx b/payload-components/source/blocks/PricingCardsCta/Component.tsx
index c619bad..3b96425 100644
--- a/payload-components/source/blocks/PricingCardsCta/Component.tsx
+++ b/payload-components/source/blocks/PricingCardsCta/Component.tsx
@@ -102,7 +102,7 @@ export const PricingCardsCtaBlock: React.FC<Props> = ({
                             key={item.id ?? `${item.feature}-${featureIndex}`}
                             className="flex items-center gap-2"
                           >
-                            <Check className="size-3" />
+                            <Check aria-hidden="true" className="size-3" />
                             {item.feature}
                           </li>
                         ))}
diff --git a/payload-components/source/blocks/PricingCardsMuted/Component.tsx b/payload-components/source/blocks/PricingCardsMuted/Component.tsx
index a378630..5d36db0 100644
--- a/payload-components/source/blocks/PricingCardsMuted/Component.tsx
+++ b/payload-components/source/blocks/PricingCardsMuted/Component.tsx
@@ -90,7 +90,7 @@ export const PricingCardsMutedBlock: React.FC<Props> = ({
                             key={item.id ?? `${item.feature}-${featureIndex}`}
                             className="flex items-center gap-2"
                           >
-                            <Check className="size-3" />
+                            <Check aria-hidden="true" className="size-3" />
                             {item.feature}
                           </li>
                         ))}
diff --git a/payload-components/source/blocks/PricingEnterprise/Component.tsx b/payload-components/source/blocks/PricingEnterprise/Component.tsx
index 17555a9..23baa79 100644
--- a/payload-components/source/blocks/PricingEnterprise/Component.tsx
+++ b/payload-components/source/blocks/PricingEnterprise/Component.tsx
@@ -80,7 +80,7 @@ export const PricingEnterpriseBlock: React.FC<Props> = ({
                           key={item.id ?? `${item.feature}-${featureIndex}`}
                           className="flex items-center gap-2"
                         >
-                          <Check className="size-3" />
+                          <Check aria-hidden="true" className="size-3" />
                           {item.feature}
                         </li>
                       ))}
diff --git a/payload-components/source/blocks/PricingEnterprise/config.ts b/payload-components/source/blocks/PricingEnterprise/config.ts
index c2c3484..e8faea5 100644
--- a/payload-components/source/blocks/PricingEnterprise/config.ts
+++ b/payload-components/source/blocks/PricingEnterprise/config.ts
@@ -47,6 +47,22 @@ export const PricingEnterprise: Block = {
         {
           name: 'href',
           type: 'text',
+          // Logos link out to arbitrary customer sites, so this can't reuse the
+          // embed/form allowlists in shared/safeUrls — but still reject anything
+          // that isn't an absolute http(s) URL (e.g. a `javascript:` payload).
+          validate: (value: unknown) => {
+            if (value === null || value === undefined || value === '') return true
+
+            try {
+              const { protocol } = new URL(String(value))
+
+              return protocol === 'https:' || protocol === 'http:'
+                ? true
+                : 'Use an absolute http(s) URL.'
+            } catch {
+              return 'Use an absolute http(s) URL.'
+            }
+          },
         },
       ],
     },
diff --git a/payload-components/source/blocks/PricingSplit/Component.tsx b/payload-components/source/blocks/PricingSplit/Component.tsx
index 295e1ab..48ddcda 100644
--- a/payload-components/source/blocks/PricingSplit/Component.tsx
+++ b/payload-components/source/blocks/PricingSplit/Component.tsx
@@ -22,8 +22,10 @@ export const PricingSplitBlock: React.FC<Props> = ({
   plans,
   title,
 }) => {
-  const entry = plans?.[0]
-  const highlight = plans?.[1]
+  // The featured plan takes the expanded right panel; the other becomes the
+  // entry plan on the left. Falls back to source order when none is marked.
+  const highlight = plans?.find((plan) => plan.featured) ?? plans?.[1]
+  const entry = plans?.find((plan) => plan !== highlight) ?? plans?.[0]
 
   return (
     <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>
@@ -81,7 +83,7 @@ export const PricingSplitBlock: React.FC<Props> = ({
                           key={item.id ?? `${item.feature}-${featureIndex}`}
                           className="flex items-center gap-2"
                         >
-                          <Check className="size-3" />
+                          <Check aria-hidden="true" className="size-3" />
                           {item.feature}
                         </li>
                       ))}
@@ -130,7 +132,7 @@ export const PricingSplitBlock: React.FC<Props> = ({
                             key={item.id ?? `${item.feature}-${featureIndex}`}
                             className="flex items-center gap-2"
                           >
-                            <Check className="size-3" />
+                            <Check aria-hidden="true" className="size-3" />
                             {item.feature}
                           </li>
                         ))}
diff --git a/src/components/site/demos/PricingSplitDemo.tsx b/src/components/site/demos/PricingSplitDemo.tsx
index cbff09a..0fe3548 100644
--- a/src/components/site/demos/PricingSplitDemo.tsx
+++ b/src/components/site/demos/PricingSplitDemo.tsx
@@ -23,8 +23,8 @@ export function PricingSplitDemo({
   content?: PricingDemoContent
 }) {
   const { description, eyebrow, plans, title } = content
-  const entry = plans[0]
-  const highlight = plans[1]
+  const highlight = plans.find((plan) => plan.featured) ?? plans[1]
+  const entry = plans.find((plan) => plan !== highlight) ?? plans[0]
 
   return (
     <div aria-hidden="true" className={className}>