Update tests with new configuration

app/components/AskOrganizer.tsx

@@ -99,11 +99,13 @@ const AskOrganizer = memo<AskOrganizerProps>(
         ? "gap-[var(--spacing-scale-020)]"
         : "gap-[var(--spacing-scale-040)]";
 
+    const labelledBy = title ? "ask-organizer-headline" : undefined;
+
     return (
       <section
         className={`${sectionPadding} ${className}`}
-        aria-labelledby="ask-organizer-headline"
-        role="region"
+        aria-labelledby={labelledBy}
+        aria-label={labelledBy ? undefined : "Ask an organizer"}
         tabIndex={-1}
       >
         <div className={`flex flex-col ${contentGap} ${styles.container}`}>
@@ -114,6 +116,7 @@ const AskOrganizer = memo<AskOrganizerProps>(
             description={description}
             variant={variant === "inverse" ? "ask-inverse" : "ask"}
             alignment={variant === "left-aligned" ? "left" : "center"}
+            titleId={labelledBy}
           />
 
           {/* Button */}

app/components/ContentLockup.tsx

@@ -15,6 +15,11 @@ interface ContentLockupProps {
   linkText?: string;
   linkHref?: string;
   alignment?: "center" | "left";
+  /**
+   * Optional id to attach to the primary title heading.
+   * Useful when a parent section uses aria-labelledby.
+   */
+  titleId?: string;
 }
 
 interface VariantStyle {
@@ -39,6 +44,7 @@ const ContentLockup = memo<ContentLockupProps>(
     linkText,
     linkHref,
     alignment = "center",
+    titleId,
   }) => {
     // Variant-specific styling
     const variantStyles: Record<string, VariantStyle> = {
@@ -132,9 +138,13 @@ const ContentLockup = memo<ContentLockupProps>(
                 alignment === "left" ? "justify-start" : "justify-center"
               }`}
             >
-              <h1 className={styles.title}>{title}</h1>
+              {title ? (
+                <h1 id={titleId} className={styles.title}>
+                  {title}
+                </h1>
+              ) : null}
             </div>
-            <h2 className={styles.subtitle}>{subtitle}</h2>
+            {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
           </div>
         ) : (
           /* Full structure for other variants */
@@ -143,7 +153,11 @@ const ContentLockup = memo<ContentLockupProps>(
             <div className={styles.titleGroup}>
               {/* Title container */}
               <div className={styles.titleContainer}>
-                <h1 className={styles.title}>{title}</h1>
+                {title ? (
+                  <h1 id={titleId} className={styles.title}>
+                    {title}
+                  </h1>
+                ) : null}
                 {variant === "hero" && (
                   <img
                     src={getAssetPath("assets/Shapes_1.svg")}
@@ -155,7 +169,7 @@ const ContentLockup = memo<ContentLockupProps>(
               </div>
 
               {/* Subtitle */}
-              <h2 className={styles.subtitle}>{subtitle}</h2>
+              {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
             </div>
 
             {/* Description */}

app/components/FeatureGrid.tsx

@@ -50,12 +50,13 @@ const FeatureGrid = memo<FeatureGridProps>(
       ],
       [],
     );
+
+    const labelledBy = title ? "feature-grid-headline" : undefined;
     return (
       <section
         className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
-        aria-labelledby="feature-grid-headline"
-        role="region"
-        tabIndex={-1}
+        aria-labelledby={labelledBy}
+        aria-label={labelledBy ? undefined : "Feature tools and services"}
       >
         <div className="py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
           <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
@@ -67,14 +68,13 @@ const FeatureGrid = memo<FeatureGridProps>(
                 variant="feature"
                 linkText="Learn more"
                 linkHref="#"
+                titleId={labelledBy}
               />
             </div>
 
             {/* MiniCard Grid */}
             <div
               className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0"
-              role="grid"
-              aria-label="Feature tools and services"
             >
               {features.map((feature, index) => (
                 <MiniCard