[Existing app][OTP Module] Close keyboard and screen-reader gaps

[kryputh]

Summary

Improve the existing OTP Module surface. This issue is intentionally scoped to existing app code and should not introduce a new standalone tool or unrelated feature.

Current area

OTP detection, OTP card rendering, copy behavior, expiry messaging, and OTP visual states

Relevant paths

• src/features/otp/detectOtp.ts
• src/features/otp/components/OTPCard.tsx
• src/features/otp/styles.css

Goal

tighten the current OTP detection and display experience around security-sensitive mail.

Work focus

Audit the existing surface for keyboard flow, focus order, visible focus, ARIA naming, reduced-motion behavior, and screen-reader clarity. Fix gaps in place without changing the core workflow.

Acceptance criteria

• All interactive controls are reachable and operable from the keyboard.
• Focus order matches the visual reading order and does not trap users unexpectedly.
• Icon-only controls have accessible names and stateful controls expose current state.
• Reduced-motion or non-animated fallback behavior is respected where motion exists.

Scope guardrails

• Keep the work inside the relevant existing app/module paths above unless a small shared helper is clearly justified.
• Do not add a new V1/V2 tool folder for this issue.
• Do not use real user data, secrets, private keys, or live customer mail.
• Keep copy and UI aligned with the Stealth Mail safety, speed, and sender-control positioning.

Suggested validation

• Run the most relevant unit or e2e tests for the touched area.
• Run �un x tsc --noEmit and �un run lint when the local environment supports the project dependency install.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.

[nelly439]

I’ll take this on. I’ll audit src/features/otp/detectOtp.ts, OTPCard.tsx, and styles.css specifically for keyboard navigation flow, focus order alignment with visual structure, ARIA labeling correctness, and reduced-motion fallbacks. I’ll then apply in-place fixes to ensure all interactive elements are keyboard accessible, icon-only actions have proper accessible names, and state changes (like expiry or copy status) are clearly exposed to screen readers without altering the core OTP workflow. Any visual or motion-related behavior will respect reduced-motion preferences. All changes will remain strictly within the OTP module, with no new architecture or feature scope introduced, and I’ll validate with existing lint/type checks where available.

[Kappa16]

Hi maintainer....I can handle this professionally and make sure your issue is fixed quickly without errors

[grantfox-oss]

🦊 GrantFox — @Kappa16 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #987)
2. Your PR will be reviewed by the Stellar-Mail maintainers

Good luck! Track your progress on GrantFox.