[Authenticator][A11Y] Password visibility toggle button missing accessible name (WCAG 4.1.2)

[timstarkk]

Description

The password visibility toggle button (eye icon) in SignInForm, SignUpForm, and other password fields lacks a semantic label/tooltip. Screen readers (VoiceOver, TalkBack) announce verbose, incorrect text like "Enter your Password menu pop-up, secure text field with autofill menu" instead of the expected "Show password" / "Hide password".

This violates WCAG 4.1.2 (Name, Role, Value - Level A): User interface components must have an accessible name that describes their purpose.

Root cause:

In lib/src/widgets/form.dart lines 144-158, the obscureTextToggle getter creates an IconButton without a tooltip parameter:

Widget get obscureTextToggle {
  return ValueListenableBuilder<bool>(
    valueListenable: obscureTextToggleValue,
    builder: (BuildContext context, bool toggleObscureText, Widget? _) {
      return IconButton(
        onPressed: () {
          obscureTextToggleValue.value = !toggleObscureText;
        },
        icon: Icon(
          toggleObscureText ? Icons.visibility : Icons.visibility_off,
        ),
        // Missing: tooltip
      );
    },
  );
}

Suggested fix:

Add a tooltip parameter that changes based on the visibility state:

IconButton(
  onPressed: () {
    obscureTextToggleValue.value = !toggleObscureText;
  },
  icon: Icon(
    toggleObscureText ? Icons.visibility : Icons.visibility_off,
  ),
  tooltip: toggleObscureText ? 'Show password' : 'Hide password',
);

The tooltip text should ideally come from the existing localization system (InputResolver) for i18n support.

Categories

• Analytics
• API (REST)
• API (GraphQL)
• Auth
• Authenticator
• DataStore
• Notifications (Push)
• Storage

Steps to Reproduce

1. Use amplify_authenticator package with SignInForm() or any form with a password field
2. Enable a screen reader (VoiceOver on iOS/macOS, TalkBack on Android, or browser screen reader on web)
3. Navigate to the password visibility toggle button (eye icon)
4. Listen to the screen reader announcement - it does not announce "Show password" or "Hide password"

Screenshots

No response

Platforms

• iOS
• Android
• Web
• macOS
• Windows
• Linux

Flutter Version

3.35.1

Amplify Flutter Version

2.3.7

Deployment Method

Amplify CLI (Gen 1)

Schema

[ekjotmultani]

Hi @timstarkk, thank you very much for raising this issue, will get this fixed and look at other places where we have gaps in screen readability.

[timstarkk]

thank you @ekjotmultani , please note I've just created one more issue related to the sign in form's accessibility #6581