Project

General

Profile

BUG #4094

Updated by Nazmul Hossain Shovon 3 months ago

**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 
 1. Navigate to the **Sign Up** page. 
 2. Use the **Tab key** to move through the form fields. 
 3. Focus on the **Password** field eye (visibility toggle) button. 
 4. Continue tabbing to focus on the **Confirm Password** field eye button. 
 5. 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](https://drive.google.com/file/d/1mE2yd_EflrgZ1iURtFwHDfxNi9Hexct1/view) 

 **Types of Issue**   
 Accessibility Issue, UI Issue 

 --- 

 **Root Cause:**   
 inconsistent styling 

   


 **Impacted Area:**   
 password toggle button

Back