From c403a86dc4f1f5930bb95516a4e092f1a6300e20 Mon Sep 17 00:00:00 2001
From: Skaiir <serval.core@gmail.com>
Date: Wed, 2 Oct 2024 14:20:01 +0200
Subject: [PATCH] fix: set radio name to properly imply tabindexes in firefox

Closes #1287
---
 .../render/components/form-fields/Radio.js    |  1 +
 .../form-js-viewer/test/spec/Form.spec.js     | 26 +++++++++
 .../test/spec/radio-tabbing.json              | 54 +++++++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 packages/form-js-viewer/test/spec/radio-tabbing.json

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
index 6d40da142..3857bddc3 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Radio.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -80,6 +80,7 @@ export function Radio(props) {
                 class="fjs-input"
                 disabled={disabled}
                 readOnly={readonly}
+                name={domId}
                 id={itemDomId}
                 type="radio"
                 onClick={() => onChange(option.value)}
diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js
index d3a908c7e..a6592b1c8 100644
--- a/packages/form-js-viewer/test/spec/Form.spec.js
+++ b/packages/form-js-viewer/test/spec/Form.spec.js
@@ -21,6 +21,7 @@ import chainExpressionsSchema from './chain-expressions.json';
 import hiddenFieldsConditionalSchema from './hidden-fields-conditional.json';
 import hiddenFieldsExpressionSchema from './hidden-fields-expression.json';
 import disabledSchema from './disabled.json';
+import radioTabbingSchema from './radio-tabbing.json';
 import requiredSchema from './required.json';
 import schema from './form.json';
 import groupsSchema from './groups.json';
@@ -1593,6 +1594,31 @@ describe('Form', function () {
     });
   });
 
+  describe('integration - radio fields', function () {
+    it('should tab once into radio group from the incoming direction', async function () {
+      // given
+      await bootstrapForm({
+        container,
+        schema: radioTabbingSchema,
+      });
+
+      // then
+      await userEvent.click(screen.getByRole('textbox', { name: /Textarea 1/i }));
+      await userEvent.tab();
+      expect(screen.getByRole('radio', { name: /Radio button 1/i })).to.equal(document.activeElement);
+
+      await userEvent.tab();
+      expect(screen.getByRole('radio', { name: /Radio button 4/i })).to.equal(document.activeElement);
+
+      await userEvent.click(screen.getByRole('textbox', { name: /Textarea 2/i }));
+      await userEvent.tab({ shift: true });
+      expect(screen.getByRole('radio', { name: /Radio button 6/i })).to.equal(document.activeElement);
+
+      await userEvent.tab({ shift: true });
+      expect(screen.getByRole('radio', { name: /Radio button 3/i })).to.equal(document.activeElement);
+    });
+  });
+
   describe('integration - expression fields', function () {
     it('should render', async function () {
       // given
diff --git a/packages/form-js-viewer/test/spec/radio-tabbing.json b/packages/form-js-viewer/test/spec/radio-tabbing.json
new file mode 100644
index 000000000..93635d63d
--- /dev/null
+++ b/packages/form-js-viewer/test/spec/radio-tabbing.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "../../../form-json-schema/resources/schema.json",
+  "components": [
+    {
+      "key": "textarea",
+      "label": "Textarea 1",
+      "type": "textarea"
+    },
+    {
+      "key": "radio",
+      "label": "Radio 1",
+      "type": "radio",
+      "values": [
+        {
+          "label": "Radio button 1",
+          "value": "radio-button-1"
+        },
+        {
+          "label": "Radio button 2",
+          "value": "radio-button-2"
+        },
+        {
+          "label": "Radio button 3",
+          "value": "radio-button-3"
+        }
+      ]
+    },
+    {
+      "key": "radio2",
+      "label": "Radio 2",
+      "type": "radio",
+      "values": [
+        {
+          "label": "Radio button 4",
+          "value": "radio-button-1"
+        },
+        {
+          "label": "Radio button 5",
+          "value": "radio-button-2"
+        },
+        {
+          "label": "Radio button 6",
+          "value": "radio-button-3"
+        }
+      ]
+    },
+    {
+      "key": "textarea2",
+      "label": "Textarea 2",
+      "type": "textarea"
+    }
+  ],
+  "type": "default"
+}