From 41d2eeb20bde3182306f134ba619942e182d0998 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Wed, 29 May 2024 04:43:46 +0900
Subject: [PATCH] fix(radio): remove required attribute for Radio with
 validationBehavior="aria" (#3110)

---
 .changeset/sour-starfishes-lick.md            |  5 +++++
 .../components/radio/__tests__/radio.test.tsx | 19 ++++++++++++++++++-
 packages/components/radio/src/use-radio.ts    |  4 ++--
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sour-starfishes-lick.md

diff --git a/.changeset/sour-starfishes-lick.md b/.changeset/sour-starfishes-lick.md
new file mode 100644
index 0000000000..e96166ccf7
--- /dev/null
+++ b/.changeset/sour-starfishes-lick.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/radio": patch
+---
+
+Remove required attribute for Radio with validationBehavior="aria"
diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index b89b2b7963..4322e60dd5 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -144,7 +144,7 @@ describe("Radio", () => {
     expect(onFocus).toBeCalled();
   });
 
-  it('should work correctly with "isRequired" prop', () => {
+  it("should have required attribute when isRequired with native validationBehavior", () => {
     const {getByRole, getAllByRole} = render(
       <RadioGroup isRequired label="Options" validationBehavior="native">
         <Radio value="1">Option 1</Radio>
@@ -161,6 +161,23 @@ describe("Radio", () => {
     expect(radios[0]).toHaveAttribute("required");
   });
 
+  it("should not have required attribute when isRequired with aria validationBehavior", () => {
+    const {getByRole, getAllByRole} = render(
+      <RadioGroup isRequired label="Options" validationBehavior="aria">
+        <Radio value="1">Option 1</Radio>
+        <Radio value="2">Option 2</Radio>
+      </RadioGroup>,
+    );
+
+    const group = getByRole("radiogroup");
+
+    expect(group).toHaveAttribute("aria-required", "true");
+
+    const radios = getAllByRole("radio");
+
+    expect(radios[0]).not.toHaveAttribute("required");
+  });
+
   it("should work correctly with controlled value", () => {
     const onValueChange = jest.fn();
 
diff --git a/packages/components/radio/src/use-radio.ts b/packages/components/radio/src/use-radio.ts
index 85a6117589..b401b76373 100644
--- a/packages/components/radio/src/use-radio.ts
+++ b/packages/components/radio/src/use-radio.ts
@@ -219,11 +219,11 @@ export function useRadio(props: UseRadioProps) {
     (props = {}) => {
       return {
         ref: inputRef,
-        ...mergeProps(props, inputProps, focusProps, {required: isRequired}),
+        ...mergeProps(props, inputProps, focusProps),
         onChange: chain(inputProps.onChange, onChange),
       };
     },
-    [inputProps, focusProps, isRequired, onChange],
+    [inputProps, focusProps, onChange],
   );
 
   const getLabelProps: PropGetter = useCallback(