Skip to content

design: add accessible two-factor authentication setup and recovery flow#182

Open
Okorie2000-code wants to merge 1 commit into
RevoraOrg:masterfrom
Okorie2000-code:design/two-factor-auth-setup-ux
Open

design: add accessible two-factor authentication setup and recovery flow#182
Okorie2000-code wants to merge 1 commit into
RevoraOrg:masterfrom
Okorie2000-code:design/two-factor-auth-setup-ux

Conversation

@Okorie2000-code

@Okorie2000-code Okorie2000-code commented Jun 25, 2026

Copy link
Copy Markdown

Summary

Implements a polished, accessible, responsive 2FA setup and recovery wizard (Issue #168).

Changes

  • src/components/TwoFactorSetup.tsx — 5-step wizard: method selection → QR/manual-key setup → code verification → recovery codes → completion
  • src/pages/Login.tsx — integrated wizard via "Set up two-factor authentication" link
  • src/index.css.tfa-* CSS classes using existing design tokens
  • src/components/TwoFactorSetup.test.tsx — 49 tests (all passing)
  • docs/uiux/ux168-two-factor-auth-setup.md — design-system documentation

Accessibility (WCAG 2.1 AA)

  • <section aria-labelledby> region; step <h2> receives programmatic focus on every transition
  • aria-live step progress, role="alert" errors, role="note" warning, role="status" copy feedback
  • QR has descriptive role="img" label; manual-key fallback always accessible
  • Full keyboard-only path tested

Test Results

  • TwoFactorSetup: 49/49 pass
  • Login: 9/9 pass
  • Lint: 0 errors

Closes #168

@drips-wave

drips-wave Bot commented Jun 25, 2026

Copy link
Copy Markdown

@Okorie2000-code Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

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.

[UI/UX Design] Design the Two-Factor Authentication setup and recovery UX

1 participant