diff --git a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
index 6406176b60..20541fdb37 100644
--- a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
+++ b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
@@ -206,6 +206,14 @@ const sections = [
Reference to the component. |
- |
+
+ | ariaLabel |
+
+ string
+ |
+ Specifies a string to be used as the name for the radio group when no `label` is provided. |
+ 'Radio group' |
+
),
diff --git a/packages/lib/src/radio-group/RadioGroup.test.tsx b/packages/lib/src/radio-group/RadioGroup.test.tsx
index e14aa3db98..333defaca7 100644
--- a/packages/lib/src/radio-group/RadioGroup.test.tsx
+++ b/packages/lib/src/radio-group/RadioGroup.test.tsx
@@ -32,6 +32,7 @@ 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
@@ -39,10 +40,15 @@ describe("Radio Group component tests", () => {
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();
+ 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();
const radioGroup = getByRole("radiogroup");
diff --git a/packages/lib/src/radio-group/RadioGroup.tsx b/packages/lib/src/radio-group/RadioGroup.tsx
index eee84f09f1..dce962d848 100644
--- a/packages/lib/src/radio-group/RadioGroup.tsx
+++ b/packages/lib/src/radio-group/RadioGroup.tsx
@@ -27,6 +27,7 @@ const DxcRadioGroup = forwardRef(
onBlur,
error,
tabIndex = 0,
+ ariaLabel = "Radio group",
},
ref
): JSX.Element => {
@@ -160,12 +161,13 @@ const DxcRadioGroup = forwardRef(
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}
>
{innerOptions.map((option, index) => (
diff --git a/packages/lib/src/radio-group/types.ts b/packages/lib/src/radio-group/types.ts
index f72707dda2..0926a4838e 100644
--- a/packages/lib/src/radio-group/types.ts
+++ b/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;
};
/**