From 5610c1dcbbe428d9a7c1d0fa916639159ead0ed6 Mon Sep 17 00:00:00 2001
From: Harshit2405-2004 <virmaniharshit27@gmail.com>
Date: Sat, 7 Mar 2026 03:32:53 +0530
Subject: [PATCH 1/2] fix(fuselage): add aria-label and roles to PasswordInput

---
 .changeset/password-a11y.md                                 | 6 ++++++
 .../fuselage/src/components/PasswordInput/PasswordInput.tsx | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/password-a11y.md

diff --git a/.changeset/password-a11y.md b/.changeset/password-a11y.md
new file mode 100644
index 0000000000..fc1a4d32b6
--- /dev/null
+++ b/.changeset/password-a11y.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/fuselage': patch
+'@rocket.chat/fuselage-forms': patch
+---
+
+Fix PasswordInput a11y violations by adding ARIA attributes to the toggle icon.
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
index cd439c4af7..7c8c56f339 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import { InputBox, type InputBoxProps } from '../InputBox';
 
-// TODO: fix a11y issues
+
 
 export type PasswordInputProps = Omit<InputBoxProps, 'type'>;
 
@@ -23,6 +23,10 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
             name={hidden ? 'eye-off' : 'eye'}
             size={20}
             onClick={handleAddonClick}
+            role="button"
+            tabIndex={0}
+            aria-label={hidden ? "Show password" : "Hide password"}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleAddonClick(); } }}
           />
         }
         ref={ref}

From 11fe6aca28a7ec7392333bcc827112c15817c843 Mon Sep 17 00:00:00 2001
From: Harshit2405-2004 <virmaniharshit27@gmail.com>
Date: Thu, 23 Apr 2026 09:19:09 +0530
Subject: [PATCH 2/2] fix(password-input): use IconButton as addon toggle

---
 .../src/components/PasswordInput/PasswordInput.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
index 7c8c56f339..65794ab159 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
@@ -1,7 +1,7 @@
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { forwardRef } from 'react';
 
-import { Icon } from '../Icon';
+import { IconButton } from '../Button';
 import { InputBox, type InputBoxProps } from '../InputBox';
 
 
@@ -19,9 +19,9 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
       <InputBox
         type={hidden ? 'password' : 'text'}
         addon={
-          <Icon
-            name={hidden ? 'eye-off' : 'eye'}
-            size={20}
+          <IconButton
+            icon={hidden ? 'eye-off' : 'eye'}
+            mini
             onClick={handleAddonClick}
             role="button"
             tabIndex={0}