ariaLabel added to input components

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>
     ),

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>
     ),

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>
     ),

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>
     ),

packages/lib/src/date-input/DateInput.tsx

@@ -73,6 +73,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
       margin,
       size,
       tabIndex,
+      ariaLabel = "Date input",
     },
     ref
   ): JSX.Element => {
@@ -260,6 +261,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
                 size={size}
                 tabIndex={tabIndex}
                 ref={dateRef}
+                ariaLabel={ariaLabel}
               />
             </Popover.Trigger>
             <Popover.Portal>

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 };

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>

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 = {

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>(
@@ -32,6 +31,7 @@ const DxcPasswordInput = forwardRef<RefType, PasswordInputPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Password input",
     },
     ref
   ) => {
@@ -44,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);
           }
         }
       })();
@@ -81,6 +81,7 @@ const DxcPasswordInput = forwardRef<RefType, PasswordInputPropsType>(
           autocomplete={autocomplete}
           ref={inputRef}
           tabIndex={tabIndex}
+          ariaLabel={ariaLabel}
         />
       </PasswordInput>
     );

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;
 };
 
 /**

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", () => {

packages/lib/src/text-input/TextInput.tsx

@@ -226,6 +226,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Text input",
     },
     ref
   ): JSX.Element => {
@@ -642,6 +643,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">

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;
 };
 
 /**