fix: set radio name to properly imply tabindexes in firefox

Closes #1287
bpmn-io · Oct 2, 2024 · 75eb04e · 75eb04e
1 parent 7b103d2
commit 75eb04e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
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
@@ -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
@@ -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
@@ -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"
+}