ariaLabel prop added to the radioGroup

apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx

@@ -206,6 +206,14 @@ const sections = [
             <td>Reference to the component.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>ariaLabel</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Specifies a string to be used as the name for the radio group when no `label` is provided.</td>
+            <td>'Radio group'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

packages/lib/src/radio-group/RadioGroup.test.tsx

@@ -32,17 +32,23 @@ describe("Radio Group component tests", () => {
     expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
     expect(radioGroup.getAttribute("aria-orientation")).toBe("vertical");
+    expect(radioGroup.getAttribute("aria-label")).toBeNull();
     expect(error.getAttribute("aria-live")).toBe("off");
     radios.forEach((radio, index) => {
       // if no option was previously selected, first option is the focusable one
       if (index === 0) expect(radio.tabIndex).toBe(0);
       else 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${index + 1}`).id);
     });
   });
 
+  test("Initial render has correct aria-label", () => {
+    const { getByRole } = render(<DxcRadioGroup ariaLabel="Example aria label" options={options} error="" />);
+    const radioGroup = getByRole("radiogroup");
+    expect(radioGroup.getAttribute("aria-label")).toBe("Example aria label");
+  });
+
   test("aria-orientation attribute changes depending on stacking prop value", () => {
     const { getByRole } = render(<DxcRadioGroup label="test-radioGroup-label" options={options} stacking="row" />);
     const radioGroup = getByRole("radiogroup");

packages/lib/src/radio-group/RadioGroup.tsx

@@ -27,6 +27,7 @@ const DxcRadioGroup = forwardRef<RefType, RadioGroupPropsType>(
       onBlur,
       error,
       tabIndex = 0,
+      ariaLabel = "Radio group",
     },
     ref
   ): JSX.Element => {
@@ -160,12 +161,13 @@ const DxcRadioGroup = forwardRef<RefType, RadioGroupPropsType>(
             stacking={stacking}
             role="radiogroup"
             aria-disabled={disabled}
-            aria-labelledby={radioGroupLabelId}
+            aria-labelledby={label ? radioGroupLabelId : undefined}
             aria-invalid={!!error}
             aria-errormessage={error ? errorId : undefined}
             aria-required={!disabled && !readOnly && !optional}
             aria-readonly={readOnly}
             aria-orientation={stacking === "column" ? "vertical" : "horizontal"}
+            aria-label={label ? undefined : ariaLabel}
           >
             <ValueInput name={name} disabled={disabled} value={value ?? innerValue ?? ""} readOnly />
             {innerOptions.map((option, index) => (

packages/lib/src/radio-group/types.ts

@@ -91,6 +91,10 @@ type RadioGroupProps = {
    * Value of the tabindex attribute.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the radio group when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 /**