From 21f2d807de4512f70c9a0b7e41b906e9fc5505c5 Mon Sep 17 00:00:00 2001
From: Samuel Alev <samuel.alev@frontify.com>
Date: Thu, 21 Nov 2024 12:30:21 +0000
Subject: [PATCH] fix: don't spread customization props alongside aria (#2109)

---
 .changeset/healthy-melons-enjoy.md            |  5 ++++
 .../components/DecorativeContent.tsx          |  1 +
 .../components/src/components/Box/Box.tsx     | 20 +++++++++++++-
 .../components/src/components/Flex/Flex.tsx   | 14 ++++++++++
 .../components/src/components/Grid/Grid.tsx   | 14 ++++++++++
 .../src/components/Section/Section.tsx        | 26 +++++++++++++++++--
 6 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/healthy-melons-enjoy.md

diff --git a/.changeset/healthy-melons-enjoy.md b/.changeset/healthy-melons-enjoy.md
new file mode 100644
index 0000000000..6aa5737678
--- /dev/null
+++ b/.changeset/healthy-melons-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix: don't spread customization props alongside aria in layout components
diff --git a/packages/components/.storybook/components/DecorativeContent.tsx b/packages/components/.storybook/components/DecorativeContent.tsx
index e32f26dff3..57e5af0bd7 100644
--- a/packages/components/.storybook/components/DecorativeContent.tsx
+++ b/packages/components/.storybook/components/DecorativeContent.tsx
@@ -24,3 +24,4 @@ export const DecorativeContent = () => {
         />
     );
 };
+DecorativeContent.displayName = 'DecorativeContent';
diff --git a/packages/components/src/components/Box/Box.tsx b/packages/components/src/components/Box/Box.tsx
index 8c9e6c57fd..3e8d42e2f5 100644
--- a/packages/components/src/components/Box/Box.tsx
+++ b/packages/components/src/components/Box/Box.tsx
@@ -28,10 +28,28 @@ export const Box = ({
     as: Component = 'div',
     'data-test-id': dataTestId = 'fondue-box',
     children,
+    role,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
     ...props
 }: BoxProps) => {
     return (
-        <Component className={styles.root} data-test-id={dataTestId} {...props} style={propsToCssVariables(props)}>
+        <Component
+            className={styles.root}
+            data-test-id={dataTestId}
+            style={propsToCssVariables(props)}
+            role={role}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            aria-labelledby={ariaLabelledBy}
+            aria-expanded={ariaExpanded}
+            aria-haspopup={ariaHasPopup}
+        >
             {children}
         </Component>
     );
diff --git a/packages/components/src/components/Flex/Flex.tsx b/packages/components/src/components/Flex/Flex.tsx
index c1b3204736..b368ef32f5 100644
--- a/packages/components/src/components/Flex/Flex.tsx
+++ b/packages/components/src/components/Flex/Flex.tsx
@@ -57,6 +57,13 @@ export const Flex = ({
     as: Component = 'div',
     'data-test-id': dataTestId = 'fondue-flex',
     children,
+    role,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
     ...props
 }: FlexProps) => {
     return (
@@ -64,6 +71,13 @@ export const Flex = ({
             className={styles.root}
             data-test-id={dataTestId}
             style={propsToCssVariables(props, { justify: 'justify-content' })}
+            role={role}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            aria-labelledby={ariaLabelledBy}
+            aria-expanded={ariaExpanded}
+            aria-haspopup={ariaHasPopup}
         >
             {children}
         </Component>
diff --git a/packages/components/src/components/Grid/Grid.tsx b/packages/components/src/components/Grid/Grid.tsx
index e309be2fed..a36165ab4a 100644
--- a/packages/components/src/components/Grid/Grid.tsx
+++ b/packages/components/src/components/Grid/Grid.tsx
@@ -61,6 +61,13 @@ export const Grid = ({
     as: Component = 'div',
     'data-test-id': dataTestId = 'fondue-grid',
     children,
+    role,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
     ...props
 }: GridProps) => {
     return (
@@ -68,6 +75,13 @@ export const Grid = ({
             className={styles.root}
             data-test-id={dataTestId}
             style={propsToCssVariables(props, { justify: 'justify-items' })}
+            role={role}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            aria-labelledby={ariaLabelledBy}
+            aria-expanded={ariaExpanded}
+            aria-haspopup={ariaHasPopup}
         >
             {children}
         </Component>
diff --git a/packages/components/src/components/Section/Section.tsx b/packages/components/src/components/Section/Section.tsx
index f578e400b9..f06d97e643 100644
--- a/packages/components/src/components/Section/Section.tsx
+++ b/packages/components/src/components/Section/Section.tsx
@@ -19,9 +19,31 @@ export type SectionProps = LayoutComponentProps & {
     'data-test-id'?: string;
 } & CommonAriaProps;
 
-export const Section = ({ 'data-test-id': dataTestId = 'fondue-section', children, ...props }: SectionProps) => {
+export const Section = ({
+    'data-test-id': dataTestId = 'fondue-section',
+    children,
+    role,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
+    ...props
+}: SectionProps) => {
     return (
-        <section className={styles.root} data-test-id={dataTestId} style={propsToCssVariables(props)}>
+        <section
+            className={styles.root}
+            data-test-id={dataTestId}
+            style={propsToCssVariables(props)}
+            role={role}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            aria-labelledby={ariaLabelledBy}
+            aria-expanded={ariaExpanded}
+            aria-haspopup={ariaHasPopup}
+        >
             {children}
         </section>
     );