[A11y] Pricing options markup order (#812)

.changeset/sharp-cups-attend.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Ensure accessible content order in `PricingOptions` markup

packages/react/src/PricingOptions/PricingOptions.features.stories.tsx

@@ -8,15 +8,7 @@ import imageExample from '../fixtures/images/bento/3.png'
 import {CopilotIcon} from '@primer/octicons-react'
 
 const decorators = Story => (
-  <Box
-    backgroundColor="default"
-    paddingBlockStart="spacious"
-    paddingBlockEnd="spacious"
-    style={{
-      ['--brand-color-accent-primary' as string]: 'var(--base-color-scale-purple-5)',
-      minHeight: '100vh',
-    }}
-  >
+  <Box backgroundColor="default" paddingBlockStart="spacious" paddingBlockEnd="spacious" style={{minHeight: '100vh'}}>
     <Grid>
       <Grid.Column span={12}>
         <Story />

packages/react/src/PricingOptions/PricingOptions.module.css

@@ -6,13 +6,38 @@
   --brand-pricing-options-item-gap: var(--brand-PricingOptions-items-gap);
   --brand-pricing-options-container-padding-inline: 0;
 
+  /* prettier-ignore */
+  --brand-pricing-options-template-areas: 
+    'leadingComponent'
+    'label'
+    'heading'
+    'description'
+    'price'
+    'actions'
+    'feature-list'
+    'footnote'
+    ;
+
+  /* prettier-ignore */
+  --brand-pricing-options-template-areas-single-item: 
+    'leadingComponent actions'
+      'label actions'
+      'heading actions'
+      'description actions'
+      'price actions'
+      'feature-list actions';
+
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto;
   row-gap: var(--brand-pricing-options-item-gap);
   padding-inline: var(--brand-pricing-options-container-padding-inline);
 }
 
+@media (min-width: 63.25rem) {
+  .PricingOptions {
+    grid-template-areas: var(--brand-pricing-options-template-areas);
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* Layout: default                                         */
 /* ---------------------------------------------------------- */
@@ -48,7 +73,6 @@
   position: absolute;
   inset-inline: 0;
   height: 1px;
-  margin-block-start: calc(var(--brand-pricing-options-item-gap) * -1);
   background-color: var(--brand-color-border-default);
 }
 
@@ -92,13 +116,7 @@
     grid-template-columns: 1fr 1fr;
     column-gap: calc(var(--base-size-96) * 2);
     grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
-    grid-template-areas:
-      'leadingComponent actions'
-      'label actions'
-      'heading actions'
-      'description actions'
-      'price actions'
-      'feature-list actions';
+    grid-template-areas: var(--brand-pricing-options-template-areas-single-item);
   }
 
   .PricingOptions--items1 .PricingOptions__actions {
@@ -113,20 +131,9 @@
 @media (min-width: 63.25rem) {
   .PricingOptions--items2,
   .PricingOptions--items3 {
-    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     column-gap: var(--brand-pricing-options-item-gap);
     row-gap: 0;
-
-    grid-template-areas:
-      'leadingComponent'
-      'label'
-      'heading'
-      'description'
-      'price'
-      'actions'
-      'feature-list'
-      'footnote';
   }
 
   .PricingOptions--variant-default.PricingOptions--items2 {
@@ -144,9 +151,13 @@
 /* Item inner layout                                       */
 /* ---------------------------------------------------------- */
 
+.PricingOptions__item {
+  display: grid;
+  grid-template-areas: var(--brand-pricing-options-template-areas);
+}
+
 @media (min-width: 63.28rem) {
   .PricingOptions__item {
-    display: grid;
     grid-row: label / footnote;
     grid-template-rows: subgrid;
   }
@@ -164,17 +175,9 @@
 @supports not (grid-template-rows: subgrid) {
   @media (min-width: 63.28rem) {
     .PricingOptions__item {
+      grid-template-areas: var(--brand-pricing-options-template-areas);
       grid-template-columns: 1fr;
       grid-template-rows: auto;
-      grid-template-areas:
-        'leadingComponent'
-        'label'
-        'heading'
-        'description'
-        'price'
-        'actions'
-        'feature-list'
-        'footnote';
     }
   }
 }

packages/react/src/PricingOptions/PricingOptions.stories.tsx

@@ -9,15 +9,7 @@ export default {
 } as Meta<typeof PricingOptions>
 
 export const Default = () => (
-  <Box
-    backgroundColor="default"
-    paddingBlockStart="spacious"
-    paddingBlockEnd="spacious"
-    style={{
-      ['--brand-color-accent-primary' as string]: 'var(--base-color-scale-purple-5)',
-      minHeight: '100vh',
-    }}
-  >
+  <Box backgroundColor="default" paddingBlockStart="spacious" paddingBlockEnd="spacious" style={{minHeight: '100vh'}}>
     <Grid>
       <Grid.Column span={12}>
         <PricingOptions>

packages/react/src/PricingOptions/PricingOptions.tsx

@@ -7,9 +7,9 @@ import {
   Accordion,
   Button,
   ButtonBaseProps,
-  Heading,
+  Heading as HeadingComponent,
   HeadingProps,
-  Label,
+  Label as LabelComponent,
   Text,
   UnorderedList,
   UnorderedListProps,
@@ -126,58 +126,53 @@ const PricingOptionsItem = forwardRef(
     ref: Ref<HTMLDivElement>,
   ) => {
     type FilteredChildren = {
-      Content: React.ReactElement<
-        | PricingOptionsLabelProps
-        | PricingOptionsHeadingProps
-        | PricingOptionsDescriptionProps
-        | PricingOptionsPriceProps
-      >[]
       FeatureList: React.ReactElement<PricingOptionsFeatureListProps> | null
       Actions: React.ReactElement<PricingOptionsActionsProps>[]
       Footnote: React.ReactElement<PricingOptionsFootnoteProps> | null
+      Heading: React.ReactElement<PricingOptionsHeadingProps> | null
+      Description: React.ReactElement<PricingOptionsDescriptionProps> | null
+      Label: React.ReactElement<PricingOptionsLabelProps> | null
+      Price: React.ReactElement<PricingOptionsPriceProps> | null
     }
 
     const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])
 
-    const {Content, FeatureList, Actions, Footnote} = memoizedChildren.reduce<FilteredChildren>(
-      (acc, child) => {
-        if (React.isValidElement(child) && typeof child.type !== 'string') {
-          if (child.type === PricingOptionsFeatureList) {
-            acc.FeatureList = child as React.ReactElement<PricingOptionsFeatureListProps> | null
+    const {Heading, Description, Label, Price, FeatureList, Actions, Footnote} =
+      memoizedChildren.reduce<FilteredChildren>(
+        (acc, child) => {
+          if (React.isValidElement(child) && typeof child.type !== 'string') {
+            if (child.type === PricingOptionsFeatureList) {
+              acc.FeatureList = child as React.ReactElement<PricingOptionsFeatureListProps> | null
+            }
+
+            if (child.type === PricingOptionsPrimaryAction || child.type === PricingOptionsSecondaryAction) {
+              acc.Actions.push(child as React.ReactElement<PricingOptionsActionsProps>)
+            }
+
+            if (child.type === PricingOptionsFootnote) {
+              acc.Footnote = child as React.ReactElement<PricingOptionsFootnoteProps>
+            }
+
+            if (child.type === PricingOptionsHeading) {
+              acc.Heading = child as React.ReactElement<PricingOptionsHeadingProps>
+            }
+
+            if (child.type === PricingOptionsDescription) {
+              acc.Description = child as React.ReactElement<PricingOptionsDescriptionProps>
+            }
+
+            if (child.type === PricingOptionsLabel) {
+              acc.Label = child as React.ReactElement<PricingOptionsLabelProps>
+            }
+
+            if (child.type === PricingOptionsPrice) {
+              acc.Price = child as React.ReactElement<PricingOptionsPriceProps>
+            }
           }
-
-          if (child.type === PricingOptionsPrimaryAction || child.type === PricingOptionsSecondaryAction) {
-            acc.Actions.push(child as React.ReactElement<PricingOptionsActionsProps>)
-          }
-
-          if (child.type === PricingOptionsFootnote) {
-            acc.Footnote = child as React.ReactElement<PricingOptionsFootnoteProps>
-          }
-
-          if (
-            child.type === PricingOptionsLabel ||
-            child.type === PricingOptionsHeading ||
-            child.type === PricingOptionsDescription ||
-            child.type === PricingOptionsPrice
-          ) {
-            acc.Content.push(
-              child as React.ReactElement<
-                | PricingOptionsLabelProps
-                | PricingOptionsDescriptionProps
-                | PricingOptionsHeadingProps
-                | PricingOptionsPriceProps
-              >,
-            )
-          }
-        }
-        return acc
-      },
-      {Content: [], FeatureList: null, Actions: [], Footnote: null},
-    )
-
-    if (leadingComponent) {
-      Content.unshift(<div className={styles['PricingOptions__leading-component']}>{leadingComponent}</div>)
-    }
+          return acc
+        },
+        {FeatureList: null, Actions: [], Footnote: null, Heading: null, Description: null, Label: null, Price: null},
+      )
 
     return (
       <div
@@ -190,7 +185,11 @@ const PricingOptionsItem = forwardRef(
         ref={ref}
         {...(rest as HTMLAttributes<HTMLElement>)}
       >
-        {Content}
+        {Heading}
+        {Label}
+        {Description}
+        {Price}
+        {leadingComponent && <div className={styles['PricingOptions__leading-component']}>{leadingComponent}</div>}
         {Actions.length > 0 && <div className={styles.PricingOptions__actions}>{Actions}</div>}
         {FeatureList}
         {Footnote}
@@ -206,15 +205,15 @@ type PricingOptionsLabelProps = PropsWithChildren<BaseProps<HTMLSpanElement>> &
 const PricingOptionsLabel = forwardRef<HTMLSpanElement, PricingOptionsLabelProps>(
   ({children, className, 'data-testid': testId, ...rest}, ref) => {
     return (
-      <Label
+      <LabelComponent
         className={clsx(styles.PricingOptions__label, className)}
         data-testid={testId || testIds.label}
         ref={ref}
         size="medium"
         {...rest}
       >
         {children}
-      </Label>
+      </LabelComponent>
     )
   },
 )
@@ -249,7 +248,7 @@ type PricingOptionsHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement
 const PricingOptionsHeading = forwardRef<HTMLHeadingElement, PricingOptionsHeadingProps>(
   ({as = 'h3', children, 'data-testid': testId, size = '5', className, ...rest}, ref) => {
     return (
-      <Heading
+      <HeadingComponent
         as={as}
         className={clsx(styles.PricingOptions__heading, styles[`PricingOptions__heading--size-${size}`], className)}
         data-testid={testId || testIds.heading}
@@ -258,7 +257,7 @@ const PricingOptionsHeading = forwardRef<HTMLHeadingElement, PricingOptionsHeadi
         {...rest}
       >
         {children}
-      </Heading>
+      </HeadingComponent>
     )
   },
 )
@@ -463,7 +462,7 @@ type PricingOptionsFeatureHeadingProps = PropsWithChildren<BaseProps<HTMLHeading
 const PricingOptionsFeatureHeading = forwardRef<HTMLHeadingElement, PricingOptionsFeatureHeadingProps>(
   ({children, className, 'data-testid': testId, ...rest}, ref) => {
     return (
-      <Heading
+      <HeadingComponent
         as="h4"
         className={clsx(styles['PricingOptions__feature-list-heading'], className)}
         data-testid={testId || testIds.featureListHeading}
@@ -472,7 +471,7 @@ const PricingOptionsFeatureHeading = forwardRef<HTMLHeadingElement, PricingOptio
         {...rest}
       >
         {children}
-      </Heading>
+      </HeadingComponent>
     )
   },
 )