feat: Allow intrinsic elements to be passed to Fieldset (#1862)

trussworks · Jan 3, 2022 · 85a0092 · 85a0092
1 parent 6e6a5df
commit 85a0092
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/forms/Fieldset/Fieldset.test.tsx b/src/components/forms/Fieldset/Fieldset.test.tsx
@@ -16,6 +16,17 @@ describe('Fieldset component', () => {
     expect(queryByText('My Fieldset')).toBeInTheDocument()
   })
 
+  it('accepts fieldset intrinsic props', () => {
+    const { queryByText } = render(
+      <Fieldset aria-live="polite">My Fieldset</Fieldset>
+    )
+
+    const myFieldset = queryByText('My Fieldset')
+
+    expect(myFieldset).toBeInTheDocument()
+    expect(myFieldset).toHaveAttribute('aria-live', 'polite')
+  })
+
   describe('renders uswds classes', () => {
     it('renders legend with class usa-legend by default', () => {
       const { queryByTestId, getByText } = render(

diff --git a/src/components/forms/Fieldset/Fieldset.tsx b/src/components/forms/Fieldset/Fieldset.tsx
@@ -19,7 +19,8 @@ export const Fieldset = ({
   className,
   legendSrOnly,
   legendStyle = 'default',
-}: FieldsetProps): React.ReactElement => {
+  ...fieldsetProps
+}: FieldsetProps & JSX.IntrinsicElements['fieldset']): React.ReactElement => {
   const classes = classnames('usa-fieldset', className)
 
   if (legendSrOnly) {
@@ -35,7 +36,7 @@ export const Fieldset = ({
   })
 
   return (
-    <fieldset data-testid="fieldset" className={classes}>
+    <fieldset data-testid="fieldset" className={classes} {...fieldsetProps}>
       {legend && <legend className={legendClasses}>{legend}</legend>}
       {children}
     </fieldset>