[A11y] Pricing options markup order

.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

@@ -162,20 +162,23 @@
  * https://caniuse.com/css-subgrid
  */
 @supports not (grid-template-rows: subgrid) {
-  @media (min-width: 63.28rem) {
-    .PricingOptions__item {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto;
-      grid-template-areas:
-        'leadingComponent'
-        'label'
-        'heading'
-        'description'
-        'price'
-        'actions'
-        'feature-list'
-        'footnote';
-    }
+  .PricingOptions__item {
+    grid-template-areas:
+      'leadingComponent'
+      'label'
+      'heading'
+      'description'
+      'price'
+      'actions'
+      'feature-list'
+      'footnote';
+  }
+}
+
+@media (min-width: 63.28rem) {
+  .PricingOptions__item {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
   }
 }
 

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>
     )
   },
 )