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..65794ab159 100644 --- a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx +++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx @@ -1,10 +1,10 @@ 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'; -// TODO: fix a11y issues + export type PasswordInputProps = Omit; @@ -19,10 +19,14 @@ const PasswordInput = forwardRef( { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleAddonClick(); } }} /> } ref={ref}