From 71ad30d4b0eba89194c61548070fe9f654933bcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Fri, 17 Nov 2023 11:09:51 +0100
Subject: [PATCH] fix(Selection): correctly link id with label (#2911)

Fixes #2842
---
 .../forms/Field/Selection/Selection.tsx       |  1 +
 .../Selection/__tests__/Selection.test.tsx    | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
index 5c9db20a452..adc721091bc 100644
--- 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
index 4013f7d8ff0..3388d172193 100644
--- 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">