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; }; /**