Merge pull request #2137 from dxc-technology/jialecl-textInput-ariaLabel

ariaLabel added to input components

Author: Mil4n0r

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