Skip to content

(gen3): Add aria labels for show password buttons#4099

Open
leemchale-okta wants to merge 1 commit into
masterfrom
LM-show-password-aria-labels-OKTA-1164538
Open

(gen3): Add aria labels for show password buttons#4099
leemchale-okta wants to merge 1 commit into
masterfrom
LM-show-password-aria-labels-OKTA-1164538

Conversation

@leemchale-okta

@leemchale-okta leemchale-okta commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Description:

Fixes WCAG 2.4.6 issues (Deque audit) in the Gen3 (v3) widget where the show/hide password toggle didn't convey its purpose to screen readers.

Root cause: Odyssey's PasswordField hardcodes the toggle aria-label to "Show password" for every field, with no override prop in the version we ship (@okta/odyssey-react-mui@1.44.0). So duplicate toggles (new + re-enter password) are indistinguishable, and non-password secret fields (security answer, YubiKey) are mislabeled.

Fix:

  1. transformInputPassword resolves a distinct label per field: confirmPassword → "Show re-entered password", credentials.answer → "Show answer", YubiKey → "Show YubiKey verification code", reset-password → "Show new password", everything else (incl. sign-in) → "Show password" (unchanged).
  2. InputPassword.tsx applies that label to Odyssey's toggle (button[aria-controls="<name>"]); the name stays stable across show/hide (state via aria-pressed).

Sign-in flow is unaffected. All target i18n keys already existed.

Why not upgrade Odyssey? (out of scope)

Odyssey added a showPasswordToggleAriaLabel prop in 1.65.0 (OKTA-1217904), which is the clean long-term fix. But bumping 1.44 → 1.65 is a 21-minor jump, the widget runs Odyssey on Preact, and theme.ts heavily customizes Odyssey internals (+ design-tokens lockstep, dropped react-i18next) — high regression risk, its own VRT/parity effort. Too risky to bundle with a P1 a11y fix.

This is a temporary workaround. Once Odyssey ≥ 1.65.0 lands, remove the DOM override and pass showPasswordToggleAriaLabel={getTranslation(translations, 'visibilityToggleLabel')} instead — the transform logic stays identical. Code comments point to OKTA-1217904.

PR Checklist

Issue:

Reviewers:

Screenshot/Video:

No visual change (accessible-name only).

Downstream Monolith Build:

@leemchale-okta leemchale-okta changed the title add aria labels for show passwor buttons (gen3): Add aria labels for show password buttons Jul 23, 2026
@leemchale-okta
leemchale-okta marked this pull request as ready for review July 23, 2026 22:26

@Luxu2-Okta Luxu2-Okta left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, make sure you run downstream and nightly gen3, also make sure it doesn't break IE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants