ariaLabel prop added to textarea

apps/website/screens/components/textarea/code/TextareaCodePage.tsx

@@ -277,6 +277,16 @@ const sections = [
             <td>Reference to the component.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>ariaLabel</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Specifies a string to be used as the name for the textarea element when no <Code>label</Code> is provided.
+            </td>
+            <td>'Text area'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

packages/lib/src/textarea/Textarea.test.tsx

@@ -48,11 +48,18 @@ describe("Textarea component tests", () => {
   });
 
   test("Renders with correct accessibility attributes", () => {
-    const { getByLabelText } = render(<DxcTextarea label="Example label" />);
+    const { getByLabelText } = render(<DxcTextarea label="Example label" ariaLabel="Example aria label" />);
     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(<DxcTextarea ariaLabel="Example aria label" />);
+    const textarea = getByRole("textbox");
+    expect(textarea.getAttribute("aria-label")).toBe("Example aria label");
   });
 
   test("Renders with correct initial value", () => {

packages/lib/src/textarea/Textarea.tsx

@@ -31,6 +31,7 @@ const DxcTextarea = forwardRef<RefType, TextareaPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Text area",
     },
     ref
   ) => {
@@ -47,10 +48,7 @@ const DxcTextarea = forwardRef<RefType, TextareaPropsType>(
     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<RefType, TextareaPropsType>(
             aria-invalid={!!error}
             aria-errormessage={error ? errorId : undefined}
             aria-required={!disabled && !optional}
+            aria-label={label ? undefined : ariaLabel}
           />
           {!disabled && typeof error === "string" && (
             <ErrorMessageContainer id={errorId} role="alert" aria-live={error ? "assertive" : "off"}>

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.