From 2a0745770811f7bc09e6d3622b90bdf3b2c9b2ba Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 13 Jan 2025 13:56:40 +0100
Subject: [PATCH 1/4] ariaLabel prop added to textInput

---
 .../components/text-input/code/TextInputCodePage.tsx  | 11 +++++++++++
 packages/lib/src/text-input/TextInput.test.tsx        |  9 +++++++++
 packages/lib/src/text-input/TextInput.tsx             |  2 ++
 packages/lib/src/text-input/types.ts                  |  4 ++++
 4 files changed, 26 insertions(+)

diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
index 55df2016ff..27e50064fe 100644
--- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
+++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
@@ -330,6 +330,17 @@ 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 textInput element when no <Code>label</Code> is
+              provided.
+            </td>
+            <td>'Text input'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
diff --git a/packages/lib/src/text-input/TextInput.test.tsx b/packages/lib/src/text-input/TextInput.test.tsx
index ec1994dae1..22be2c6ff8 100644
--- a/packages/lib/src/text-input/TextInput.test.tsx
+++ b/packages/lib/src/text-input/TextInput.test.tsx
@@ -50,6 +50,15 @@ describe("TextInput component tests", () => {
     expect(input.getAttribute("aria-errormessage")).toBe(errorMessage.id);
     expect(input.getAttribute("aria-invalid")).toBe("true");
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+    expect(input.getAttribute("aria-label")).toBeNull();
+  });
+
+  test("Renders with correct error aria label", () => {
+    const { getByRole } = render(
+      <DxcTextInput placeholder="Placeholder" error="Error message." ariaLabel="Example aria label" />
+    );
+    const input = getByRole("textbox");
+    expect(input.getAttribute("aria-label")).toBe("Example aria label");
   });
 
   test("Renders with correct initial value", () => {
diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx
index 56957e107a..7d841b3c7f 100644
--- a/packages/lib/src/text-input/TextInput.tsx
+++ b/packages/lib/src/text-input/TextInput.tsx
@@ -105,6 +105,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Text input",
     },
     ref
   ): JSX.Element => {
@@ -520,6 +521,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
                   aria-invalid={!!error}
                   aria-errormessage={error ? errorId : undefined}
                   aria-required={!disabled && !optional}
+                  aria-label={label ? undefined : ariaLabel}
                 />
                 {!disabled && error && (
                   <ErrorIcon aria-hidden="true">
diff --git a/packages/lib/src/text-input/types.ts b/packages/lib/src/text-input/types.ts
index 36cd8d3369..7d2d316f40 100644
--- a/packages/lib/src/text-input/types.ts
+++ b/packages/lib/src/text-input/types.ts
@@ -155,6 +155,10 @@ type Props = {
    * Value of the tabindex attribute.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the textInput element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 /**

From 295bce6d56883b59b839eef75e2a52ac47744d46 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 13 Jan 2025 14:03:15 +0100
Subject: [PATCH 2/4] ariaLabel added to other input components

---
 packages/lib/src/date-input/DateInput.tsx         | 2 ++
 packages/lib/src/date-input/types.ts              | 4 ++++
 packages/lib/src/number-input/NumberInput.tsx     | 2 ++
 packages/lib/src/number-input/types.ts            | 4 ++++
 packages/lib/src/password-input/PasswordInput.tsx | 2 ++
 packages/lib/src/password-input/types.ts          | 4 ++++
 6 files changed, 18 insertions(+)

diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx
index 20d13c9067..b9a88603ac 100644
--- a/packages/lib/src/date-input/DateInput.tsx
+++ b/packages/lib/src/date-input/DateInput.tsx
@@ -73,6 +73,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
       margin,
       size,
       tabIndex,
+      ariaLabel,
     },
     ref
   ): JSX.Element => {
@@ -260,6 +261,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
                 size={size}
                 tabIndex={tabIndex}
                 ref={dateRef}
+                ariaLabel={ariaLabel}
               />
             </Popover.Trigger>
             <Popover.Portal>
diff --git a/packages/lib/src/date-input/types.ts b/packages/lib/src/date-input/types.ts
index b7203b20b0..5913922443 100644
--- a/packages/lib/src/date-input/types.ts
+++ b/packages/lib/src/date-input/types.ts
@@ -93,6 +93,10 @@ type Props = {
    * Value of the tabindex attribute.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the date input element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 export type DateType = { day: number; month: number; year: number };
diff --git a/packages/lib/src/number-input/NumberInput.tsx b/packages/lib/src/number-input/NumberInput.tsx
index ba7bb9a418..315012b76d 100644
--- a/packages/lib/src/number-input/NumberInput.tsx
+++ b/packages/lib/src/number-input/NumberInput.tsx
@@ -28,6 +28,7 @@ const DxcNumberInput = forwardRef<RefType, NumberInputPropsType>(
       margin,
       size,
       tabIndex,
+      ariaLabel = "Number input",
     },
     ref
   ) => {
@@ -77,6 +78,7 @@ const DxcNumberInput = forwardRef<RefType, NumberInputPropsType>(
             size={size}
             tabIndex={tabIndex}
             ref={ref}
+            ariaLabel={ariaLabel}
           />
         </NumberInputContainer>
       </NumberInputContext.Provider>
diff --git a/packages/lib/src/number-input/types.ts b/packages/lib/src/number-input/types.ts
index b07f52260c..1c96009ac9 100644
--- a/packages/lib/src/number-input/types.ts
+++ b/packages/lib/src/number-input/types.ts
@@ -111,6 +111,10 @@ type Props = {
    * Value of the tabindex attribute.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the number input element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 export type NumberInputContextProps = {
diff --git a/packages/lib/src/password-input/PasswordInput.tsx b/packages/lib/src/password-input/PasswordInput.tsx
index 3908e347f2..a381e553fb 100644
--- a/packages/lib/src/password-input/PasswordInput.tsx
+++ b/packages/lib/src/password-input/PasswordInput.tsx
@@ -32,6 +32,7 @@ const DxcPasswordInput = forwardRef<RefType, PasswordInputPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Password input",
     },
     ref
   ) => {
@@ -81,6 +82,7 @@ const DxcPasswordInput = forwardRef<RefType, PasswordInputPropsType>(
           autocomplete={autocomplete}
           ref={inputRef}
           tabIndex={tabIndex}
+          ariaLabel={ariaLabel}
         />
       </PasswordInput>
     );
diff --git a/packages/lib/src/password-input/types.ts b/packages/lib/src/password-input/types.ts
index 107803952a..07d81c648d 100644
--- a/packages/lib/src/password-input/types.ts
+++ b/packages/lib/src/password-input/types.ts
@@ -92,6 +92,10 @@ type Props = {
    * Value of the tabindex attribute.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the password input element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 /**

From 79339cb9090fb85476f61bbda27019c096503e58 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 13 Jan 2025 14:09:33 +0100
Subject: [PATCH 3/4] Documentation added to other input components

---
 .../components/date-input/code/DateInputCodePage.tsx  | 11 +++++++++++
 .../number-input/code/NumberInputCodePage.tsx         | 11 +++++++++++
 .../password-input/code/PasswordInputCodePage.tsx     | 11 +++++++++++
 packages/lib/src/date-input/DateInput.tsx             |  2 +-
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
index 90e77ce10d..de5c5361df 100644
--- a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
+++ b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
@@ -236,6 +236,17 @@ 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 date input element when no <Code>label</Code> is
+              provided.
+            </td>
+            <td>'Date input'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
diff --git a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
index e00ce2a76f..3a5e8afb98 100644
--- a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
+++ b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
@@ -257,6 +257,17 @@ 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 number input element when no <Code>label</Code> is
+              provided.
+            </td>
+            <td>'Number input'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
diff --git a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
index 538c434ec5..40c81df14d 100644
--- a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
+++ b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
@@ -204,6 +204,17 @@ 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 password input element when no <Code>label</Code> is
+              provided.
+            </td>
+            <td>'Password input'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx
index b9a88603ac..49e00a94bc 100644
--- a/packages/lib/src/date-input/DateInput.tsx
+++ b/packages/lib/src/date-input/DateInput.tsx
@@ -73,7 +73,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
       margin,
       size,
       tabIndex,
-      ariaLabel,
+      ariaLabel = "Date input",
     },
     ref
   ): JSX.Element => {

From 2398b0d55e71b67414500cc4d989e45b91a9d3fe Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Tue, 14 Jan 2025 13:30:18 +0100
Subject: [PATCH 4/4] removed aria label from setAriaAttributes function

---
 packages/lib/src/password-input/PasswordInput.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/lib/src/password-input/PasswordInput.tsx b/packages/lib/src/password-input/PasswordInput.tsx
index a381e553fb..3c5bad0b94 100644
--- a/packages/lib/src/password-input/PasswordInput.tsx
+++ b/packages/lib/src/password-input/PasswordInput.tsx
@@ -8,10 +8,9 @@ const setInputType = (type: string, element: HTMLDivElement | null) => {
   element?.getElementsByTagName("input")[0]?.setAttribute("type", type);
 };
 
-const setAriaAttributes = (ariaExpanded: "true" | "false", ariaLabel: string, element: HTMLDivElement | null) => {
+const setAriaAttributes = (ariaExpanded: "true" | "false", element: HTMLDivElement | null) => {
   const buttonElement = element?.getElementsByTagName("button")[0];
   buttonElement?.setAttribute("aria-expanded", ariaExpanded);
-  buttonElement?.setAttribute("aria-label", ariaLabel);
 };
 
 const DxcPasswordInput = forwardRef<RefType, PasswordInputPropsType>(
@@ -45,12 +44,12 @@ const DxcPasswordInput = forwardRef<RefType, PasswordInputPropsType>(
         if (isPasswordVisible) {
           setInputType("text", inputRef.current);
           if (passwordInput.inputHidePasswordTitle) {
-            setAriaAttributes("true", passwordInput.inputHidePasswordTitle, inputRef.current);
+            setAriaAttributes("true", inputRef.current);
           }
         } else {
           setInputType("password", inputRef.current);
           if (passwordInput.inputShowPasswordTitle) {
-            setAriaAttributes("false", passwordInput.inputShowPasswordTitle, inputRef.current);
+            setAriaAttributes("false", inputRef.current);
           }
         }
       })();