Merge pull request #853 from gympass/feat/adjusts-accessibility-of-in…

…put-component Feat/adjusts accessibility of input component
gympass · Dec 10, 2024 · 01cd9be · 01cd9be
2 parents 5c9b870 + 7971780
commit 01cd9be
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/packages/yoga/src/Input/web/Helper.jsx b/packages/yoga/src/Input/web/Helper.jsx
@@ -54,7 +54,7 @@ const Helper = ({
       </Info>
     )}
     {maxLength && !hideMaxLength && (
-      <Info as="span">
+      <Info as="span" aria-hidden>
         {length}/{maxLength}
       </Info>
     )}

diff --git a/packages/yoga/src/Input/web/Input.jsx b/packages/yoga/src/Input/web/Input.jsx
@@ -110,6 +110,7 @@ const Input = React.forwardRef(
       hideMaxLength,
       rightIcon,
       a11yId,
+      closeAriaLabel,
       includeAriaAttributes,
       leftElement,
       ...props
@@ -214,7 +215,7 @@ const Input = React.forwardRef(
               role="button"
               hasIconRight={!!rightIcon}
             >
-              <Close aria-label="Clear" />
+              <Close aria-label={closeAriaLabel} />
             </IconWrapper>
           )}
 
@@ -274,6 +275,8 @@ Input.propTypes = {
   a11yId: string,
   /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
   includeAriaAttributes: bool,
+  /** this prop will be used in the aria-label of the clear input button. */
+  closeAriaLabel: string,
 
   /** element on the left */
   leftElement: node,
@@ -298,6 +301,7 @@ Input.defaultProps = {
   placeholder: undefined,
   rightIcon: undefined,
   a11yId: undefined,
+  closeAriaLabel: 'Clear',
   includeAriaAttributes: true,
   leftElement: undefined,
 };

diff --git a/packages/yoga/src/Input/web/Password.jsx b/packages/yoga/src/Input/web/Password.jsx
@@ -80,7 +80,15 @@ const IconWrapper = styled.div`
   `}
 `;
 
-const Password = ({ disabled, style, className, full, ...props }) => {
+const Password = ({
+  disabled,
+  style,
+  className,
+  full,
+  showPasswordAriaLabel,
+  hidePasswordAriaLabel,
+  ...props
+}) => {
   const [showPassword, toggleShowPassword] = useState(false);
   const inputRef = useRef(null);
 
@@ -120,6 +128,9 @@ const Password = ({ disabled, style, className, full, ...props }) => {
         onKeyDown={togglePassword}
         disabled={disabled}
         role="button"
+        aria-label={
+          showPassword ? showPasswordAriaLabel : hidePasswordAriaLabel
+        }
       >
         {showPassword ? (
           <Visibility width={20} height={20} />
@@ -135,6 +146,8 @@ Password.propTypes = {
   className: string,
   disabled: bool,
   full: bool,
+  showPasswordAriaLabel: string,
+  hidePasswordAriaLabel: string,
   style: shape({}),
 };
 
@@ -143,6 +156,8 @@ Password.defaultProps = {
   disabled: false,
   full: false,
   style: undefined,
+  showPasswordAriaLabel: undefined,
+  hidePasswordAriaLabel: undefined,
 };
 
 export default Password;
diff --git a/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
@@ -1616,6 +1616,7 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
         Helper text
       </span>
       <span
+        aria-hidden="true"
         class="c7"
       >
         0
-Original file line number
+Diff line change
@@ Expand Up @@
             Helper text
           </span>
           <span
+            aria-hidden="true"
             class="c7"
           >
@@ Expand Down @@