diff --git a/.Jules/changelog.md b/.Jules/changelog.md index 11fc864e..57fb5e7d 100644 --- a/.Jules/changelog.md +++ b/.Jules/changelog.md @@ -23,6 +23,14 @@ - Uses `expo-haptics` with `Light` impact style for subtle feedback. - **Technical:** Centralized haptic logic in `mobile/components/ui/` to ensure consistency and maintainability. +- **Consistent Focus/Hover States:** Added comprehensive `focus-visible` styles across key interactive web components to improve keyboard navigation accessibility. + - **Features:** + - Updated `Button` component with theme-specific (Neo/Glass) focus rings. + - Updated `Input` password visibility toggle to use `focus-visible` to prevent ugly rings for mouse users while supporting keyboard users. + - Added focus rings to `Modal` and `Toast` close buttons. + - Added focus rings to `Sidebar` navigation links. + - **Technical:** Modified `web/components/ui/Button.tsx`, `web/components/ui/Input.tsx`, `web/components/ui/Modal.tsx`, `web/components/ui/Toast.tsx`, and `web/components/layout/Sidebar.tsx`. + - **Mobile Accessibility:** Completed accessibility audit for all mobile screens. - **Features:** - Added `accessibilityLabel` to all interactive elements (buttons, inputs, list items). diff --git a/.Jules/todo.md b/.Jules/todo.md index ebb0c7a5..1ee3aec3 100644 --- a/.Jules/todo.md +++ b/.Jules/todo.md @@ -78,8 +78,9 @@ ### Web -- [ ] **[style]** Consistent hover/focus states across all buttons - - Files: `web/components/ui/Button.tsx`, usage across pages +- [x] **[style]** Consistent hover/focus states across all buttons + - Completed: 2026-03-13 + - Files: `web/components/ui/Button.tsx`, `web/components/ui/Input.tsx`, `web/components/ui/Modal.tsx`, `web/components/ui/Toast.tsx`, `web/components/layout/Sidebar.tsx` - Context: Ensure all buttons have proper hover + focus-visible styles - Impact: Professional feel, keyboard users know where they are - Size: ~35 lines diff --git a/web/components/layout/Sidebar.tsx b/web/components/layout/Sidebar.tsx index c1ed305f..562d161e 100644 --- a/web/components/layout/Sidebar.tsx +++ b/web/components/layout/Sidebar.tsx @@ -37,7 +37,7 @@ export const Sidebar = () => {