diff --git a/.Jules/palette.md b/.Jules/palette.md index ee2d8f0..2b66d78 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -94,3 +94,7 @@ ## 2025-06-16 - [Functional Matchers for Complex Buttons and Utility-First Layout] **Learning:** React Testing Library's `findByText` can fail on buttons containing Materialize icons due to text node fragmentation and the icon's name being part of the `textContent`. Using a functional matcher that checks for partial content and tag name is more robust. Additionally, strictly adhering to utility classes (e.g., 'center-align') instead of inline styles ensures compliance with repository constraints and theme consistency. **Action:** Always use functional matchers for testing interactive elements with icons and avoid inline styles by leveraging existing CSS utility classes. + +## 2025-06-18 - [Standardized Accessibility and Password Visibility in V2 Auth Forms] +**Learning:** In V2 authentication flows, maintaining feature parity between Login, Signup, and Forgot Password pages—specifically regarding password visibility toggles and label-input associations—ensures a predictable and accessible user experience. Missing `id` and `htmlFor` attributes on inputs breaks screen reader navigation even if the layout looks correct. +**Action:** Always audit the full authentication suite (Login, Signup, Recovery) for accessibility parity and ensure interactive password fields consistently offer visibility toggles. diff --git a/src/v2/pages/V2ForgotPassword.jsx b/src/v2/pages/V2ForgotPassword.jsx index 2f6b6fa..6a57c64 100644 --- a/src/v2/pages/V2ForgotPassword.jsx +++ b/src/v2/pages/V2ForgotPassword.jsx @@ -35,7 +35,7 @@ const V2ForgotPassword = () => { display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}> - lock_reset + lock_reset
@@ -48,8 +48,9 @@ const V2ForgotPassword = () => { {!submitted ? (