Conversation
Dashboard-manager (signup VerifyCodeStep, PasswordRules) and settings (VerifyPhoneModal, PasswordRequirements) carry near-verbatim copies of a six-box one-time-code input and a live password requirements list; the settings copy of the rules list had lost its live region. OtpInput renders one box per digit inside a named fieldset. The first box opts into SMS autofill with `autocomplete="one-time-code"` and an uncapped maxLength, and a pasted or autofilled code is spread across the boxes; Backspace on an empty box clears and focuses the previous one, the arrow keys move between boxes, non-digits are dropped, and `onComplete` fires once every digit is filled. Works controlled or uncontrolled and can carry the code through a hidden input for native forms. PasswordRules evaluates `rules` against `value` inside an `aria-live` region, swapping a bullet for a check per rule and appending a screen-reader status.
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
1 participant
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.
Summary
Dashboard-manager (signup
VerifyCodeStep,PasswordRules) and settings (VerifyPhoneModal,PasswordRequirements) carry near-verbatim copies of a one-time-code input and a live password requirements list. The settings copy of the rules had lost itsaria-liveregion.OtpInput(new): one box per digit inside a fieldset named bylabel. The first box opts into SMS autofill (autocomplete="one-time-code", uncappedmaxLength) and a pasted or autofilled code is spread across the boxes. Backspace on an empty box clears and focuses the previous one; ArrowLeft/ArrowRight move; non-digits are dropped.onChangeon every change,onCompletewhen full; controlled (value) or uncontrolled (defaultValue);namerenders a hidden input with the full code;erroris announced withrole="alert";digitLabellocalises each box.PasswordRules(new):rules(id,label,test) evaluated againstvaluein anaria-liveregion; each rule swaps a bullet for a check and appends a screen-reader status (metLabel/pendingLabel).Test plan
npx vitest run lib/components/OtpInput lib/components/PasswordRules, lint, types, prettierOtpInput,PasswordRules