@dxc-technology/halstack-react 0.0.0-d30020b → 0.0.0-d3554d7

package/radio-group/RadioGroup.test.js

@@ -10,7 +10,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var single_options = [{
+var options = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -37,29 +37,149 @@ var single_options = [{
 }, {
   label: "Option 09",
   value: "9"
+}];
+var single_disabled_options = [{
+  label: "Option 01",
+  value: "1"
 }, {
-  label: "Option 10",
-  value: "10"
+  label: "Option 02",
+  value: "2"
+}, {
+  label: "Option 03",
+  value: "3",
+  disabled: true
 }];
 describe("Radio Group component tests", function () {
-  test("Controlled - Not optional constraint - undefined", function () {
+  test("Initial render has correct aria attributes and tabIndex", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radioGroup-label",
+      options: options
+    })),
+        getByRole = _render.getByRole,
+        getAllByRole = _render.getAllByRole,
+        getByText = _render.getByText;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    expect(radioGroup.getAttribute("aria-disabled")).toBe("false");
+    expect(radioGroup.getAttribute("aria-labelledby")).toBe(getByText("test-radioGroup-label").id);
+    expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
+    expect(radioGroup.getAttribute("aria-required")).toBe("true");
+    radios.forEach(function (radio, index) {
+      // if no option was previously selected, first option is the focusable one
+      index === 0 ? expect(radio.tabIndex).toBe(0) : expect(radio.tabIndex).toBe(-1);
+      expect(radio.getAttribute("aria-checked")).toBe("false");
+      expect(radio.getAttribute("aria-disabled")).toBe("false");
+      expect(radio.getAttribute("aria-labelledby")).toBe(getByText("Option 0".concat(index + 1)).id);
+    });
+  });
+  test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radioGroup-label",
+      options: options,
+      disabled: true
+    })),
+        getByRole = _render2.getByRole,
+        getAllByRole = _render2.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    expect(radioGroup.getAttribute("aria-disabled")).toBe("true");
+    radios.forEach(function (radio) {
+      expect(radio.tabIndex).toBe(-1);
+    });
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowLeft",
+      code: "ArrowLeft",
+      keyCode: 37,
+      charCode: 37
+    });
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    radios.forEach(function (radio) {
+      expect(radio.tabIndex).toBe(-1);
+    });
+  });
+  test("Disabled option renders with correct aria attribute, correct tabIndex value and it is not focusable by keyboard (focus 'jumps' the disabled option)", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      label: "test-radioGroup-label",
+      options: single_disabled_options
+    })),
+        getByRole = _render3.getByRole,
+        getAllByRole = _render3.getAllByRole,
+        container = _render3.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    expect(radios[2].getAttribute("aria-disabled")).toBe("true");
+    expect(radios[0].tabIndex).toBe(0);
+    expect(radios[1].tabIndex).toBe(-1);
+    expect(radios[2].tabIndex).toBe(-1);
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(radios[0].tabIndex).toBe(0);
+    expect(radios[1].tabIndex).toBe(-1);
+    expect(radios[2].tabIndex).toBe(-1);
+  });
+  test("Error state renders with correct aria attributes", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radioGroup-label",
+      options: options,
+      error: "Error message"
+    })),
+        getByRole = _render4.getByRole,
+        getByText = _render4.getByText;
+
+    var radioGroup = getByRole("radiogroup");
+    var errorMessage = getByText("Error message");
+    expect(radioGroup.getAttribute("aria-errormessage")).toBe(errorMessage.id);
+    expect(radioGroup.getAttribute("aria-invalid")).toBe("true");
+    expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+  });
+  test("Radio group with required constraint and 'undefined' as value, sends an error", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-select-label",
-      options: single_options,
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radioGroup-label",
+      options: options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render.getByRole,
-        getAllByRole = _render.getAllByRole;
+        getByRole = _render5.getByRole,
+        getAllByRole = _render5.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
 
-    _react2.fireEvent.focus(radioGroup);
-
     _react2.fireEvent.blur(radioGroup);
 
     expect(onBlur).toHaveBeenCalled();
@@ -74,8 +194,6 @@ describe("Radio Group component tests", function () {
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith("1");
 
-    _react2.fireEvent.focus(radioGroup);
-
     _react2.fireEvent.blur(radioGroup);
 
     expect(onBlur).toHaveBeenCalled();
@@ -83,25 +201,23 @@ describe("Radio Group component tests", function () {
       value: "1"
     });
   });
-  test("Controlled - Not optional constraint - empty string", function () {
+  test("Radio group with required constraint and empty string as value, sends an error", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-select-label",
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radioGroup-label",
       value: "",
-      options: single_options,
+      options: options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render2.getByRole,
-        getAllByRole = _render2.getAllByRole;
+        getByRole = _render6.getByRole,
+        getAllByRole = _render6.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
 
-    _react2.fireEvent.focus(radioGroup);
-
     _react2.fireEvent.blur(radioGroup);
 
     expect(onBlur).toHaveBeenCalled();
@@ -115,91 +231,190 @@ describe("Radio Group component tests", function () {
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith("1");
   });
-  test("Controlled - Optional constraint", function () {
+  test("The 'defaultValue' gives the radio group an initial value when it is uncontrolled", function () {
+    var onChange = jest.fn();
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      defaultValue: "2",
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange
+    })),
+        getAllByRole = _render7.getAllByRole,
+        container = _render7.container;
+
+    var radio = getAllByRole("radio")[1];
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(radio.tabIndex).toBe(0);
+    expect(radio.getAttribute("aria-checked")).toBe("true");
+    expect(submitInput.value).toBe("2");
+  });
+  test("Optional radio group conditions: onBlur event doesn't send an error when no radio was checked, has correct aria attributes, custom label and its value is the empty string", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
-      options: single_options,
+      options: options,
       onChange: onChange,
       onBlur: onBlur,
-      optional: true
+      optional: true,
+      optionalItemLabel: "No selection"
     })),
-        getByRole = _render3.getByRole;
+        getByRole = _render8.getByRole,
+        getByText = _render8.getByText,
+        container = _render8.container;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("false");
 
-    _react2.fireEvent.focus(radioGroup);
-
     _react2.fireEvent.blur(radioGroup);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({});
     expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
+    var optionalLabel = getByText("No selection");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(optionalLabel);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("");
+    expect(submitInput.value).toBe("");
   });
-  test("Select an option - Click on radio input label", function () {
+  test("Controlled radio group", function () {
     var onChange = jest.fn();
+    var onBlur = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      value: "2",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
-      options: single_options,
+      options: options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render9.getByRole,
+        getAllByRole = _render9.getAllByRole,
+        container = _render9.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(submitInput.value).toBe("2");
+    expect(radios[1].tabIndex).toBe(0);
+    expect(radios[1].getAttribute("aria-checked")).toBe("true");
+
+    _userEvent["default"].click(radios[6]);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("7");
+
+    _react2.fireEvent.blur(radioGroup);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "2"
+    });
+  });
+  test("Select an option by clicking on its label", function () {
+    var onChange = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
       onChange: onChange
     })),
-        getByText = _render4.getByText,
-        getAllByRole = _render4.getAllByRole;
+        getByText = _render10.getByText,
+        getAllByRole = _render10.getAllByRole,
+        container = _render10.container;
 
-    var radio = getByText("Option 10");
+    var radioLabel = getByText("Option 09");
+    var checkedRadio = getAllByRole("radio")[8];
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(checkedRadio.tabIndex).toBe(-1);
 
-    _userEvent["default"].click(radio);
+    _userEvent["default"].click(radioLabel);
 
     expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith("10");
-    expect(getAllByRole("radio")[9].getAttribute("aria-checked")).toBe("true");
+    expect(onChange).toHaveBeenCalledWith("9");
+    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.tabIndex).toBe(0);
+    expect(document.activeElement).toEqual(checkedRadio);
+    expect(submitInput.value).toBe("9");
   });
-  test("Select an option - Click on radio input", function () {
+  test("Select an option by clicking on its radio input", function () {
     var onChange = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
-      options: single_options,
+      options: options,
       onChange: onChange
     })),
-        getAllByRole = _render5.getAllByRole;
+        getAllByRole = _render11.getAllByRole,
+        container = _render11.container;
 
-    var radio = getAllByRole("radio")[6];
+    var checkedRadio = getAllByRole("radio")[6];
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(checkedRadio.tabIndex).toBe(-1);
 
-    _userEvent["default"].click(radio);
+    _userEvent["default"].click(checkedRadio);
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith("7");
-    expect(radio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.tabIndex).toBe(0);
+    expect(document.activeElement).toEqual(checkedRadio);
+    expect(submitInput.value).toBe("7");
   });
-  test("Select an option - Tab and Enter key", function () {
+  test("Select an option that is already checked does not call onChange event but gives the focus", function () {
     var onChange = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      defaultValue: "2",
+      name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
-      options: single_options,
+      options: options,
       onChange: onChange
     })),
-        getByRole = _render6.getByRole,
-        getAllByRole = _render6.getAllByRole;
+        getAllByRole = _render12.getAllByRole;
 
-    var radioGroup = getByRole("radiogroup");
-    var radio = getAllByRole("radio")[0];
+    var checkedRadio = getAllByRole("radio")[1];
+    expect(checkedRadio.tabIndex).toBe(0);
+    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
 
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "Tab",
-      code: "Tab",
-      keyCode: 9,
-      charCode: 9
-    });
+    _userEvent["default"].click(checkedRadio);
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(document.activeElement).toEqual(checkedRadio);
+  });
+  test("The 'enter' key checks the current focused option if anyone is checked", function () {
+    var onChange = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange
+    })),
+        getByRole = _render13.getByRole,
+        getAllByRole = _render13.getAllByRole,
+        container = _render13.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var checkedRadio = getAllByRole("radio")[0];
+    var submitInput = container.querySelector("input[name=\"test\"]");
 
     _react2.fireEvent.keyDown(radioGroup, {
       key: "Enter",
@@ -210,29 +425,27 @@ describe("Radio Group component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith("1");
-    expect(radio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.tabIndex).toBe(0);
+    expect(submitInput.value).toBe("1");
   });
-  test("Select an option - Tab and Space key", function () {
+  test("The 'space' key checks the current focused option if anyone is checked", function () {
     var onChange = jest.fn();
 
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
-      options: single_options,
+      options: options,
       onChange: onChange
     })),
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole;
+        getByRole = _render14.getByRole,
+        getAllByRole = _render14.getAllByRole,
+        container = _render14.container;
 
     var radioGroup = getByRole("radiogroup");
-    var radio = getAllByRole("radio")[0];
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "Tab",
-      code: "Tab",
-      keyCode: 9,
-      charCode: 9
-    });
+    var checkedRadio = getAllByRole("radio")[0];
+    var submitInput = container.querySelector("input[name=\"test\"]");
 
     _react2.fireEvent.keyDown(radioGroup, {
       key: "Space",
@@ -243,6 +456,239 @@ describe("Radio Group component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith("1");
-    expect(radio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+    expect(checkedRadio.tabIndex).toBe(0);
+    expect(submitInput.value).toBe("1");
+  });
+  test("When the radio group gains the focus by keyboard ('tab' key), it goes to the first option (if no one was previously selected), without selecting it", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        container = _render15.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    var checkedRadio = getAllByRole("radio")[0];
+
+    _userEvent["default"].tab();
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(submitInput.value).toBe("");
+    expect(checkedRadio.tabIndex).toBe(0);
+    expect(checkedRadio.getAttribute("aria-checked")).toBe("false");
+    expect(document.activeElement).toEqual(checkedRadio);
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(radios[1].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[1]);
+    expect(radios[1].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("2");
+  });
+  test("The 'arrowDown' and 'arrowRight' keys move the selection to the next radio", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      defaultValue: "8",
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render16.getByRole,
+        getAllByRole = _render16.getAllByRole,
+        container = _render16.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(radios[8].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[8]);
+    expect(radios[8].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("9");
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(radios[0].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[0]);
+    expect(radios[0].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("1");
+  });
+  test("The 'arrowUp' and 'arrowLeft' keys move the selection to the previous radio", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      defaultValue: "2",
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole,
+        container = _render17.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(radios[0].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[0]);
+    expect(radios[0].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("1");
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowLeft",
+      code: "ArrowLeft",
+      keyCode: 37,
+      charCode: 37
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(radios[8].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[8]);
+    expect(radios[8].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("9");
+  });
+  test("Keyboard focus movement continues from the last radio input clicked", function () {
+    var onChange = jest.fn();
+
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange
+    })),
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole,
+        container = _render18.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(radios[3]);
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("5");
+    expect(radios[4].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[4]);
+    expect(radios[4].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("5");
+
+    _userEvent["default"].click(radios[8]);
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowLeft",
+      code: "ArrowLeft",
+      keyCode: 37,
+      charCode: 37
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("8");
+    expect(radios[7].getAttribute("aria-checked")).toBe("true");
+    expect(document.activeElement).toEqual(radios[7]);
+    expect(radios[7].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("8");
+  });
+  test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
+    var onChange = jest.fn();
+
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "test",
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: options,
+      onChange: onChange,
+      readonly: true
+    })),
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.getAllByRole,
+        container = _render19.container;
+
+    var radioGroup = getByRole("radiogroup");
+    var radios = getAllByRole("radio");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(radios[5]);
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(radios[5].getAttribute("aria-checked")).toBe("false");
+    expect(document.activeElement).toEqual(radios[5]);
+    expect(radios[5].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("");
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(radios[4].getAttribute("aria-checked")).toBe("false");
+    expect(document.activeElement).toEqual(radios[4]);
+    expect(radios[4].tabIndex).toBe(0);
+    expect(submitInput.value).toBe("");
   });
 });