diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx index 6c3378d912..aa6a5e8f65 100644 --- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx +++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx @@ -277,6 +277,16 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + Specifies a string to be used as the name for the textarea element when no label is provided. + + 'Text area' + ), diff --git a/packages/lib/src/textarea/Textarea.test.tsx b/packages/lib/src/textarea/Textarea.test.tsx index cd5156c728..2a01439207 100644 --- a/packages/lib/src/textarea/Textarea.test.tsx +++ b/packages/lib/src/textarea/Textarea.test.tsx @@ -48,11 +48,18 @@ describe("Textarea component tests", () => { }); test("Renders with correct accessibility attributes", () => { - const { getByLabelText } = render(); + const { getByLabelText } = render(); const textarea = getByLabelText("Example label"); expect(textarea.getAttribute("aria-invalid")).toBe("false"); expect(textarea.getAttribute("aria-describedBy")).toBeNull(); expect(textarea.getAttribute("aria-required")).toBe("true"); + expect(textarea.getAttribute("aria-label")).toBeNull(); + }); + + test("Renders with correct aria-label", () => { + const { getByRole } = render(); + const textarea = getByRole("textbox"); + expect(textarea.getAttribute("aria-label")).toBe("Example aria label"); }); test("Renders with correct initial value", () => { diff --git a/packages/lib/src/textarea/Textarea.tsx b/packages/lib/src/textarea/Textarea.tsx index 85877a1db4..3cacf607b5 100644 --- a/packages/lib/src/textarea/Textarea.tsx +++ b/packages/lib/src/textarea/Textarea.tsx @@ -31,6 +31,7 @@ const DxcTextarea = forwardRef( margin, size = "medium", tabIndex = 0, + ariaLabel = "Text area", }, ref ) => { @@ -47,10 +48,7 @@ const DxcTextarea = forwardRef( const isNotOptional = (value: string) => value === "" && !optional; const isLengthIncorrect = (value: string) => - value !== "" && - minLength && - maxLength && - (value.length < minLength || value.length > maxLength); + value !== "" && minLength && maxLength && (value.length < minLength || value.length > maxLength); const changeValue = (newValue: string) => { if (value == null) { @@ -143,6 +141,7 @@ const DxcTextarea = forwardRef( aria-invalid={!!error} aria-errormessage={error ? errorId : undefined} aria-required={!disabled && !optional} + aria-label={label ? undefined : ariaLabel} /> {!disabled && typeof error === "string" && ( diff --git a/packages/lib/src/textarea/types.ts b/packages/lib/src/textarea/types.ts index 669d4e14d9..5fff2da46b 100644 --- a/packages/lib/src/textarea/types.ts +++ b/packages/lib/src/textarea/types.ts @@ -122,6 +122,10 @@ type Props = { * Value of the tabindex attribute. */ tabIndex?: number; + /** + * Specifies a string to be used as the name for the textarea element when no `label` is provided. + */ + ariaLabel?: string; }; /** * Reference to the component.