From a15849c7bc6a5b6ec5884d6da9e4d935273caff7 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 10 Jan 2025 13:20:23 +0100 Subject: [PATCH 1/3] ariaLabel prop added to textarea --- packages/lib/src/textarea/Textarea.test.tsx | 3 ++- packages/lib/src/textarea/Textarea.tsx | 7 +++---- packages/lib/src/textarea/types.ts | 4 ++++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/textarea/Textarea.test.tsx b/packages/lib/src/textarea/Textarea.test.tsx index cd5156c728..e8de390ece 100644 --- a/packages/lib/src/textarea/Textarea.test.tsx +++ b/packages/lib/src/textarea/Textarea.test.tsx @@ -48,11 +48,12 @@ 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")).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..01f7e8cac8 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={ariaLabel} /> {!disabled && typeof error === "string" && ( diff --git a/packages/lib/src/textarea/types.ts b/packages/lib/src/textarea/types.ts index 669d4e14d9..48e277fca9 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; + /** + * A string of text that will be the accessible name for the textarea. + */ + ariaLabel?: string; }; /** * Reference to the component. From a4b769cefa686e8007f45487bdb8ab914bbf3d81 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 10 Jan 2025 13:32:13 +0100 Subject: [PATCH 2/3] Prop added to documentation --- .../components/textarea/code/TextareaCodePage.tsx | 11 +++++++++++ packages/lib/src/textarea/Textarea.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx index 6c3378d912..420584ed6a 100644 --- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx +++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx @@ -277,6 +277,17 @@ const sections = [ Reference to the component. - + + ariaLabel + + string + + + A string of text that will be the accessible name for the textarea. Consider using this prop in case there + is no label available. + + 'Text area' + ), diff --git a/packages/lib/src/textarea/Textarea.tsx b/packages/lib/src/textarea/Textarea.tsx index 01f7e8cac8..bd1b191e90 100644 --- a/packages/lib/src/textarea/Textarea.tsx +++ b/packages/lib/src/textarea/Textarea.tsx @@ -31,7 +31,7 @@ const DxcTextarea = forwardRef( margin, size = "medium", tabIndex = 0, - ariaLabel = "Text Area", + ariaLabel = "Text area", }, ref ) => { From fb6b2ecc4454c2777a7b5f38ed02799a53ae64a4 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 13 Jan 2025 11:19:57 +0100 Subject: [PATCH 3/3] ariaLabel behaviour changed based on label avaibility --- .../screens/components/textarea/code/TextareaCodePage.tsx | 3 +-- packages/lib/src/textarea/Textarea.test.tsx | 6 ++++++ packages/lib/src/textarea/Textarea.tsx | 2 +- packages/lib/src/textarea/types.ts | 2 +- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx index 420584ed6a..aa6a5e8f65 100644 --- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx +++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx @@ -283,8 +283,7 @@ const sections = [ string - A string of text that will be the accessible name for the textarea. Consider using this prop in case there - is no label available. + 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 e8de390ece..2a01439207 100644 --- a/packages/lib/src/textarea/Textarea.test.tsx +++ b/packages/lib/src/textarea/Textarea.test.tsx @@ -53,6 +53,12 @@ describe("Textarea component tests", () => { 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"); }); diff --git a/packages/lib/src/textarea/Textarea.tsx b/packages/lib/src/textarea/Textarea.tsx index bd1b191e90..3cacf607b5 100644 --- a/packages/lib/src/textarea/Textarea.tsx +++ b/packages/lib/src/textarea/Textarea.tsx @@ -141,7 +141,7 @@ const DxcTextarea = forwardRef( aria-invalid={!!error} aria-errormessage={error ? errorId : undefined} aria-required={!disabled && !optional} - aria-label={ariaLabel} + 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 48e277fca9..5fff2da46b 100644 --- a/packages/lib/src/textarea/types.ts +++ b/packages/lib/src/textarea/types.ts @@ -123,7 +123,7 @@ type Props = { */ tabIndex?: number; /** - * A string of text that will be the accessible name for the textarea. + * Specifies a string to be used as the name for the textarea element when no `label` is provided. */ ariaLabel?: string; };