fix(FieldBlock): add asFieldset property to force use fieldset/legend (…

…#2780)
dnbexperience · Oct 24, 2023 · bd1faed · bd1faed
1 parent f6d9ea3
commit bd1faed
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/...rtal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx b/...rtal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx
@@ -4,8 +4,9 @@ showTabs: true
 
 ## Properties
 
-| Property                                                                                                         | Type                | Description                                                                                             |
-| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------- |
-| `width`                                                                                                          | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths.                      |
-| `size`                                                                                                           | `string` or `false` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. |
-| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various             | _(optional)_ `FieldProps` properties.                                                                   |
+| Property                                                                                                         | Type                | Description                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `width`                                                                                                          | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths.                          |
+| `size`                                                                                                           | `string` or `false` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`.     |
+| `asFieldset`                                                                                                     | `boolean`           | _(optional)_ use `true` when you have several form elements. This way a `fieldset` with a `legend` is used. |
+| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various             | _(optional)_ `FieldProps` properties.                                                                       |
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -19,6 +19,8 @@ export type Props = Pick<
   forId?: string
   contentClassName?: string
   children: React.ReactNode
+  /** Use true if you have more than one form element */
+  asFieldset?: boolean
   /** Width of outer block element */
   width?: false | 'small' | 'medium' | 'large'
   /** Width of contents block, while label etc can be wider if space is available */
@@ -37,6 +39,7 @@ function FieldBlock(props: Props) {
     label,
     labelDescription,
     labelSecondary,
+    asFieldset,
     info,
     warning,
     error: errorProp,
@@ -127,11 +130,12 @@ function FieldBlock(props: Props) {
   // A child component with a label was found, use fieldset/legend instead of div/label
   const enableFieldset = useMemo(
     () =>
-      !nestedFieldBlockContext &&
-      findElementInChildren(
-        children,
-        (child: React.ReactElement) => child.props.label
-      ),
+      asFieldset ||
+      (!nestedFieldBlockContext &&
+        findElementInChildren(
+          children,
+          (child: React.ReactElement) => child.props.label
+        )),
     []
   )
 
@@ -148,7 +152,7 @@ function FieldBlock(props: Props) {
     return (
       <FormLabel
         element={enableFieldset ? 'legend' : 'label'}
-        for_id={forId}
+        for_id={enableFieldset ? undefined : forId}
         space={{ top: 0, bottom: 'x-small' }}
         size={size}
       >

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -160,6 +160,21 @@ describe('FieldBlock', () => {
     expect(labelElements[4]).toBe(undefined)
   })
 
+  it('should use fieldset/legend when "asFieldset" is given', () => {
+    render(
+      <FieldBlock label="Legend" asFieldset>
+        content
+      </FieldBlock>
+    )
+
+    expect(document.querySelectorAll('fieldset')).toHaveLength(1)
+    expect(document.querySelectorAll('legend')).toHaveLength(1)
+    expect(document.querySelector('legend')).not.toHaveAttribute('for')
+    expect(document.querySelector('.dnb-forms-field-block').tagName).toBe(
+      'FIELDSET'
+    )
+  })
+
   it('should render a FormStatus when "info" is given', () => {
     render(<FieldBlock info="Info">content</FieldBlock>)