fix(a11y): make the plan and billing-period choices keyboard-operable

Two shapes of the same defect in checkout.

The plan cards already had a "Select Monthly" / "Select Yearly" button,
but it carried no handler — the click lived on the Paper around it, which
is mouse-only. Pressing Enter on the focused button did nothing. The
button is the natural control, so it now holds the handler and the card
stays a mouse convenience.

The billing-period cards in StaticCheckoutModal have no inner button at
all, so there the card really is the control and takes the semantics to
match, via a helper beside the style one it already used.

Author: reecebrowne

frontend/editor/src/proprietary/components/shared/config/configSections/plan/StaticCheckoutModal.tsx

@@ -15,7 +15,10 @@ import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { EmailStage } from "@app/components/shared/stripeCheckout/stages/EmailStage";
 import { validateEmail } from "@app/components/shared/stripeCheckout/utils/checkoutUtils";
-import { getClickablePaperStyle } from "@app/components/shared/stripeCheckout/utils/cardStyles";
+import {
+  getClickableCardProps,
+  getClickablePaperStyle,
+} from "@app/components/shared/stripeCheckout/utils/cardStyles";
 import {
   STATIC_STRIPE_LINKS,
   buildStripeUrlWithEmail,
@@ -194,7 +197,9 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
                   p="xl"
                   radius="md"
                   style={getClickablePaperStyle()}
-                  onClick={() => handlePeriodSelect("monthly")}
+                  {...getClickableCardProps(() =>
+                    handlePeriodSelect("monthly"),
+                  )}
                 >
                   <Stack
                     gap="md"
@@ -218,7 +223,7 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
                   p="xl"
                   radius="md"
                   style={getClickablePaperStyle()}
-                  onClick={() => handlePeriodSelect("yearly")}
+                  {...getClickableCardProps(() => handlePeriodSelect("yearly"))}
                 >
                   <Stack
                     gap="md"

frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx

@@ -80,7 +80,11 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                 )}
 
                 <div style={{ marginTop: "auto", paddingTop: "1rem" }}>
-                  <Button variant="secondary" fullWidth>
+                  <Button
+                    variant="secondary"
+                    fullWidth
+                    onClick={() => onSelectPlan("monthly")}
+                  >
                     {t("payment.planStage.selectMonthly", "Select Monthly")}
                   </Button>
                 </div>
@@ -193,7 +197,7 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                 )}
 
                 <div style={{ marginTop: "auto", paddingTop: "1rem" }}>
-                  <Button fullWidth>
+                  <Button fullWidth onClick={() => onSelectPlan("yearly")}>
                     {t("payment.planStage.selectYearly", "Select Yearly")}
                   </Button>
                 </div>

frontend/editor/src/proprietary/components/shared/stripeCheckout/utils/cardStyles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { CSSProperties, KeyboardEvent } from "react";
 
 /**
  * Shared styling utilities for plan cards
@@ -46,3 +46,22 @@ export function getClickablePaperStyle(
     ...getCardBorderStyle(isHighlighted),
   };
 }
+
+/**
+ * Semantics for a card that is itself the control. `getClickablePaperStyle`
+ * only makes a card *look* clickable; without these a Paper with an onClick is
+ * a div, so the choice cannot be reached or made by keyboard.
+ */
+export function getClickableCardProps(onActivate: () => void) {
+  return {
+    role: "button",
+    tabIndex: 0,
+    onClick: onActivate,
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onActivate();
+      }
+    },
+  };
+}