fix(fuselage): make PasswordInput visibility toggle keyboard accessible
PR
4h ago+21+21+01234567890123456789-6-6-0123456789
The show/hide eye icon in PasswordInput was just an Icon with an onClick, so we couldn't
tab to it and screen readers had nothing to announce. I swapped it for an IconButton so
it works as a normal button, and gave it an aria-label that flips between "Show password"
and "Hide password".
Since fuselage has no i18n, I added two optional props (showPasswordLabel and
hidePasswordLabel) so apps can pass translated text. They default to English so nothing
changes for existing usages.
Issues
Closes #42823
Open the PasswordInput story in Storybook, tab into the field and then tab once more.
The eye button now gets focus, and Enter/Space toggles the password. The existing
axe test in PasswordInput.spec.tsx still passes.
Summary by CodeRabbit
- Accessibility
- Improved keyboard focus and button semantics for the password visibility control.
- Added accessible labels that update between “Show password” and “Hide password.”
- Added support for custom visibility-toggle labels, including translations.
- The visibility control now follows the input’s disabled state.