From 1479e53e28b0f10b49ca91b84f952c1f6a0e6724 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 13 Mar 2026 19:58:32 +0000 Subject: [PATCH] [jules] style: Consistent hover/focus states across all components - Replaced standard `focus` with `focus-visible` across Button, Input (password toggle), Modal, Toast, and Sidebar components. - Added dual-theme support for focus rings: - Glassmorphism (`ring-blue-500`) - Neobrutalism (`ring-black dark:ring-white`) - Addressed accessibility requirements while eliminating unsightly focus rings for mouse users. - Updated `.Jules/todo.md` and `.Jules/changelog.md` to reflect completed task. Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com> --- .Jules/changelog.md | 8 ++ .Jules/todo.md | 5 +- web/components/layout/Sidebar.tsx | 2 +- web/components/ui/Button.tsx | 6 +- web/components/ui/Input.tsx | 6 +- web/components/ui/Modal.tsx | 2 +- web/components/ui/Toast.tsx | 2 +- web/package-lock.json | 125 ++++++++++++++++++++++-------- 8 files changed, 114 insertions(+), 42 deletions(-) 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 = () => {