fix(radio): remove required attribute for Radio with validationBehavior="aria" (#3110)

.changeset/sour-starfishes-lick.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/radio": patch
+---
+
+Remove required attribute for Radio with validationBehavior="aria"

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();
 

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(