fix: don't spread customization props alongside aria (#2109)

Frontify · Nov 21, 2024 · 21f2d80 · 21f2d80
1 parent 252a06f
commit 21f2d80
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 3 deletions.
diff --git a/.changeset/healthy-melons-enjoy.md 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
@@ -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
@@ -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
@@ -57,13 +57,27 @@ 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 (
         <Component
             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
@@ -61,13 +61,27 @@ 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 (
         <Component
             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
@@ -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>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,3 +24,4 @@ export const DecorativeContent = () => { @@
             />
         );
     };
+    DecorativeContent.displayName = 'DecorativeContent';