fix: set radio name to properly imply tabindexes in firefox

Closes #1287

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)}

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

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"
+}