Skip to content

[jules] style: Consistent hover/focus states #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Devasy wants to merge 8 commits into
base: main
Choose a base branch
from
Open

[jules] style: Consistent hover/focus states #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1f64fe0
[jules] style: Consistent hover/focus states
google-labs-jules[bot] Jan 28, 2026
a0cdc0c
Merge remote-tracking branch 'origin/main' into jules/enhance-focus-s…
google-labs-jules[bot] Jan 30, 2026
62d2dbd
fix(mobile): robust onRefresh handling
google-labs-jules[bot] Jan 30, 2026
33d1621
Update mobile/screens/GroupDetailsScreen.js
Devasy Jan 31, 2026
c887fc8
fix(mobile): standardise fetchData error handling
google-labs-jules[bot] Jan 31, 2026
71b4a51
Merge remote-tracking branch 'origin/main' into jules/enhance-focus-s…
google-labs-jules[bot] Jan 31, 2026
dc89ef6
Update mobile/screens/GroupSettingsScreen.js
Devasy Jan 31, 2026
89e6031
fix(mobile): move setIsLoading inside try block in FriendsScreen
google-labs-jules[bot] Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions .Jules/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,28 @@
## [Unreleased]

### Added
- **Consistent Focus States:** Implemented high-contrast `focus-visible` styles across interactive elements to improve keyboard accessibility.
- **Features:**
- Dual-theme support: Black rings for Neobrutalism, Blue rings for Glassmorphism.
- Applied to `Button` component, Modal close buttons, Toast dismiss buttons, and Auth page actions (Google button, toggle links).
- **Technical:** Used Tailwind's `focus-visible:` modifiers with `ring`, `ring-offset`, and theme-specific colors.

- **Mobile Accessibility:** Completed accessibility audit for all mobile screens.
- **Features:**
- Added `accessibilityLabel` to all interactive elements (buttons, inputs, list items).
- Added `accessibilityRole` to ensure screen readers identify element types correctly.
- Added `accessibilityHint` for clearer context on destructive actions or complex interactions.
- Covered Auth, Dashboard, Groups, and Utility screens.
- **Technical:** Updated all files in `mobile/screens/` to compliant with React Native accessibility standards.

- **Mobile Pull-to-Refresh:** Implemented native pull-to-refresh interactions with haptic feedback for key lists.
- **Features:**
- Integrated `RefreshControl` into `HomeScreen`, `FriendsScreen`, and `GroupDetailsScreen`.
- Added haptic feedback (`Haptics.ImpactFeedbackStyle.Light`) on refresh trigger.
- Separated 'isRefreshing' state from 'isLoading' to prevent full-screen spinner interruptions.
- Themed the refresh spinner using `react-native-paper`'s primary color.
- **Technical:** Installed `expo-haptics`. Refactored data fetching logic to support silent updates.

- **Confirmation Dialog System:** Replaced browser's native `alert`/`confirm` with a custom, accessible, and themed modal system.
- **Features:**
- Dual-theme support (Glassmorphism & Neobrutalism).
Expand Down
11 changes: 11 additions & 0 deletions .Jules/knowledge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,17 @@ Commonly used components:

Most screens use `<View style={{ flex: 1 }}>` - consider wrapping in `SafeAreaView` for notched devices.

### Accessibility Patterns

**Date:** 2026-01-29
**Context:** Auditing and fixing mobile accessibility

When building mobile screens with React Native Paper:
1. **Explicit Labels:** Always add `accessibilityLabel` to `IconButton`, `FAB`, and `Card` components that act as buttons.
2. **Roles:** Use `accessibilityRole="button"` for pressable elements, `accessibilityRole="header"` for titles.
3. **Hints:** Use `accessibilityHint` for non-obvious actions (e.g., "Double tap to delete").
4. **State:** For custom checkboxes or toggles, use `accessibilityState={{ checked: boolean }}`.

---

## API Response Patterns
Expand Down
23 changes: 13 additions & 10 deletions .Jules/todo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@

### Mobile

- [ ] **[ux]** Pull-to-refresh with haptic feedback on all list screens
- Files: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`
- [x] **[ux]** Pull-to-refresh with haptic feedback on all list screens
- Completed: 2026-01-21
- Files: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`, `mobile/screens/FriendsScreen.js`
- Context: Add RefreshControl + Expo Haptics to main lists
- Impact: Native feel, users can easily refresh data
- Size: ~45 lines
- Added: 2026-01-01
- Size: ~150 lines
Comment on lines +53 to +58
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Task marked complete prematurely—outstanding review comments request changes.

The pull-to-refresh task is marked as completed (2026-01-21), but the PR objectives clearly document unresolved review comments requesting defensive try/catch/finally patterns in the refresh handlers for FriendsScreen.js, GroupDetailsScreen.js, and HomeScreen.js. The review feedback specifically asks for error handling to prevent refresh spinners from remaining active when Haptics.impactAsync rejects.

A task should not be marked complete while there are outstanding change requests on the same files and functionality.

📋 Recommended next steps

Either:

  1. Address the review comments by implementing the defensive error handling patterns, then update the completion date, OR
  2. Revert the completion status to [ ] until the review feedback is resolved and the PR is merged.
🤖 Prompt for AI Agents 
In @.Jules/todo.md around lines 53 - 58, The task was marked complete while PR
review requested defensive error handling in the pull-to-refresh handlers;
update each refresh handler (e.g., onRefresh / handleRefresh used with
RefreshControl in the refresh handlers of FriendsScreen, GroupDetailsScreen and
HomeScreen) to wrap the async work and Haptics.impactAsync call in
try/catch/finally so any rejection doesn't leave the spinner active: call
setRefreshing(true) before work, await the refresh logic and Haptics.impactAsync
inside try, log/handle errors in catch, and always call setRefreshing(false) in
finally; after fixing handlers, update the todo entry to either uncheck the task
or change the completion date once the changes are merged.


- [ ] **[ux]** Complete skeleton loading for HomeScreen groups
- File: `mobile/screens/HomeScreen.js`
Expand All @@ -64,7 +64,8 @@
- Size: ~40 lines
- Added: 2026-01-01

- [ ] **[a11y]** Complete accessibility labels for all screens
- [x] **[a11y]** Complete accessibility labels for all screens
- Completed: 2026-01-29
Comment on lines +67 to +68
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Completion date is in the future.

The accessibility task shows a completion date of 2026-01-29, but this PR was created on 2026-01-28. While this might reflect a planned completion or timezone difference, it's clearer to use dates that reflect when work was actually completed rather than future dates.

🤖 Prompt for AI Agents 
In @.Jules/todo.md around lines 67 - 68, Update the completion date for the
checklist item "[x] **[a11y]** Complete accessibility labels for all screens" in
.Jules/todo.md so it does not lie in the future; replace "Completed: 2026-01-29"
with the actual completion date (e.g., 2026-01-28 or the date the work was
finished) or remove the date entirely if you cannot confirm it, ensuring the
entry accurately reflects when the accessibility work was completed.

- Files: All screens in `mobile/screens/`
- Context: Add accessibilityLabel, accessibilityHint, accessibilityRole throughout
- Impact: Screen reader users can use app fully
Expand All @@ -77,12 +78,12 @@

### 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
- Files: `web/components/ui/Button.tsx`, `web/components/ui/Modal.tsx`, `web/components/ui/Toast.tsx`, `web/pages/Auth.tsx`
- Context: Ensure all buttons have proper hover + focus-visible styles
- Impact: Professional feel, keyboard users know where they are
- Size: ~35 lines
- Added: 2026-01-01
- Completed: 2026-01-22

### Mobile

Expand Down Expand Up @@ -158,5 +159,7 @@
- Completed: 2026-01-14
- Files modified: `web/components/ErrorBoundary.tsx`, `web/App.tsx`
- Impact: App doesn't crash, users can recover

_No tasks completed yet. Move tasks here after completion._
- [x] **[ux]** Pull-to-refresh with haptic feedback on all list screens
- Completed: 2026-01-21
- Files modified: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`, `mobile/screens/FriendsScreen.js`
- Impact: Native feel, users can easily refresh data
Comment on lines +162 to +165
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove duplicate task entry.

The pull-to-refresh task appears in both the Mobile high-priority section (lines 53-58) and here in the "Completed Tasks" section. This duplication creates redundancy and maintenance burden.

Consider removing this duplicate entry since the task is already marked as complete in its original location (lines 53-58).

♻️ Suggested cleanup

Since the task is already marked [x] with completion date in the Mobile section (lines 53-58), this duplicate entry in the "Completed Tasks" section can be safely removed.

🤖 Prompt for AI Agents 
In @.Jules/todo.md around lines 162 - 165, The TODO contains a duplicated
completed task "Pull-to-refresh with haptic feedback on all list screens";
remove the duplicate entry from the "Completed Tasks" section (the one at lines
162-165) so only the original entry in the Mobile high-priority section remains,
and ensure any associated metadata (completion date and modified file list) is
preserved only in the original Mobile entry to avoid redundancy.

Loading
Loading