fix(Selection): correctly link id with label (#2911)

Fixes #2842
dnbexperience · Nov 17, 2023 · 71ad30d · 71ad30d
1 parent 6332903
commit 71ad30d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
@@ -162,6 +162,7 @@ function Selection(props: Props) {
             >
               {options.map((option, i) => (
                 <ToggleButton
+                  id={options.length > 0 ? id : undefined}
                   key={`option-${i}-${option.value}`}
                   text={option.title}
                   on_change={option.handleSelect}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx
@@ -219,6 +219,33 @@ describe('Selection', () => {
         expect(buttons[1].getAttribute('aria-pressed')).toBe('true')
       })
 
+      it('renders fieldset/legend if more than two options are given', () => {
+        const { rerender } = render(
+          <Field.Selection variant="button" label="Legend">
+            <Field.Option value="foo">Fooo</Field.Option>
+            <Field.Option value="bar">Baar</Field.Option>
+          </Field.Selection>
+        )
+
+        expect(document.querySelectorAll('fieldset')).toHaveLength(1)
+        expect(document.querySelectorAll('legend')).toHaveLength(1)
+        expect(document.querySelectorAll('label')).toHaveLength(0)
+
+        rerender(
+          <Field.Selection variant="button" label="Label">
+            <Field.Option value="foo">Fooo</Field.Option>
+          </Field.Selection>
+        )
+
+        expect(document.querySelectorAll('fieldset')).toHaveLength(0)
+        expect(document.querySelectorAll('legend')).toHaveLength(0)
+        expect(document.querySelectorAll('label')).toHaveLength(1)
+        expect(document.querySelector('label')).toHaveAttribute('for')
+        expect(document.querySelector('label').getAttribute('for')).toBe(
+          document.querySelector('button').getAttribute('id')
+        )
+      })
+
       it('renders update selected option based on external value change', () => {
         const { rerender } = render(
           <Field.Selection variant="button" value="bar">