(gen3): Add aria labels for show password buttons#4099
Open
leemchale-okta wants to merge 1 commit into
Open
Conversation
leemchale-okta
marked this pull request as ready for review
July 23, 2026 22:26
leemchale-okta
requested review from
Luxu2-Okta,
alexchen-okta,
glenfannin-okta,
jaredperreault-okta and
shuowu-okta
as code owners
July 23, 2026 22:26
Luxu2-Okta
approved these changes
Jul 24, 2026
Luxu2-Okta
left a comment
Contributor
There was a problem hiding this comment.
LGTM, make sure you run downstream and nightly gen3, also make sure it doesn't break IE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
PasswordFieldhardcodes the togglearia-labelto "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:
transformInputPasswordresolves 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).InputPassword.tsxapplies that label to Odyssey's toggle (button[aria-controls="<name>"]); the name stays stable across show/hide (state viaaria-pressed).Sign-in flow is unaffected. All target i18n keys already existed.
Why not upgrade Odyssey? (out of scope)
Odyssey added a
showPasswordToggleAriaLabelprop 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, andtheme.tsheavily customizes Odyssey internals (+ design-tokens lockstep, droppedreact-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
aria-labelonly.)Issue:
Reviewers:
Screenshot/Video:
No visual change (accessible-name only).
Downstream Monolith Build: