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.