BUG #4094
opendev #4299: [SQA] : Auth module
[SQA] Inconsistent focus styling on Password and Confirm Password toggle buttons using Tab key
100%
Description
Issue Description
On the Sign Up page, when navigating through the form using the Tab key, the password visibility toggle buttons (eye icons) display inconsistent focus styles. The Password field toggle shows a black border, while the Confirm Password field toggle shows a teal green border, resulting in inconsistent UI and accessibility behavior.
Module / Page
Sign Up
Module Section
Password & Confirm Password Fields
Screen Size
All Devices
Steps to Reproduce¶
- Navigate to the Sign Up page.
- Use the Tab key to move through the form fields.
- Focus on the Password field eye (visibility toggle) button.
- Continue tabbing to focus on the Confirm Password field eye button.
- Observe the focus border styling on both toggle buttons.
Expected Result
Both Password and Confirm Password toggle buttons should have consistent focus styling (color, border, and outline) when accessed via keyboard navigation, following the same accessibility and design standards.
Actual Result
- The Password toggle button shows a black border on focus.
- The Confirm Password toggle button shows a teal green border on focus.
Attachments
PoC
Types of Issue
Accessibility Issue, UI Issue
Root Cause:
inconsistent styling
Impacted Area:
password toggle button