fix(react): ShowPasswordButton should have aria-hidden icon (#4372)

* fix(react): ShowPasswordButton should have aria-hidden icon * Create brown-apricots-add.md --------- Co-authored-by: Heather Buchel <buchel@amazon.com>
aws-amplify · Aug 23, 2023 · 265f0b4 · 265f0b4
1 parent 10bae80
commit 265f0b4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/brown-apricots-add.md b/.changeset/brown-apricots-add.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(react): ShowPasswordButton should have aria-hidden="true" on icon
diff --git a/...nents/AccountSettings/ChangePassword/__tests__/__snapshots__/ChangePassword.test.tsx.snap b/...nents/AccountSettings/ChangePassword/__tests__/__snapshots__/ChangePassword.test.tsx.snap
@@ -54,6 +54,7 @@ exports[`ChangePassword renders as expected 1`] = `
                 Password is hidden
               </span>
               <span
+                aria-hidden="true"
                 class="amplify-icon"
                 style="width: 1em; height: 1em;"
               >
@@ -119,6 +120,7 @@ exports[`ChangePassword renders as expected 1`] = `
                 Password is hidden
               </span>
               <span
+                aria-hidden="true"
                 class="amplify-icon"
                 style="width: 1em; height: 1em;"
               >
@@ -184,6 +186,7 @@ exports[`ChangePassword renders as expected 1`] = `
                 Password is hidden
               </span>
               <span
+                aria-hidden="true"
                 class="amplify-icon"
                 style="width: 1em; height: 1em;"
               >
@@ -271,6 +274,7 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
                 Password is hidden
               </span>
               <span
+                aria-hidden="true"
                 class="amplify-icon"
                 style="width: 1em; height: 1em;"
               >
@@ -336,6 +340,7 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
                 Password is hidden
               </span>
               <span
+                aria-hidden="true"
                 class="amplify-icon"
                 style="width: 1em; height: 1em;"
               >
@@ -401,6 +406,7 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
                 Password is hidden
               </span>
               <span
+                aria-hidden="true"
                 class="amplify-icon"
                 style="width: 1em; height: 1em;"
               >

diff --git a/packages/react/src/primitives/PasswordField/ShowPasswordButton.tsx b/packages/react/src/primitives/PasswordField/ShowPasswordButton.tsx
@@ -42,8 +42,8 @@ const ShowPasswordButtonPrimitive: Primitive<
 
   const icon =
     fieldType === 'password'
-      ? icons?.visibility ?? <IconVisibility />
-      : icons?.visibilityOff ?? <IconVisibilityOff />;
+      ? icons?.visibility ?? <IconVisibility aria-hidden="true" />
+      : icons?.visibilityOff ?? <IconVisibilityOff aria-hidden="true" />;
 
   return (
     <Button