🎨 Palette: Enhance Button accessibility props#176
Conversation
Added accessibilityLabel, accessibilityHint, accessibilityRole and accessibilityState to the base Button component to improve screen reader compatibility. Also added an entry to the Palette journal. Co-authored-by: mknoufi <209227354+mknoufi@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
the
size:M
|
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| accessibilityRole="button" | ||
| accessibilityLabel={accessibilityLabel || title} | ||
| accessibilityHint={accessibilityHint} | ||
| accessibilityState={{ disabled: isDisabled, busy: loading }} |
There was a problem hiding this comment.
🟠 Architect Review — HIGH
Accessibility props were added only to frontend/src/components/ui/Button.tsx, but this Button is not imported anywhere; existing flows use frontend/src/components/Button.tsx (e.g., via EnhancedButton, EmptyState, DatabaseSyncStatus), so the new role/label/state behavior will not be applied in normal usage.
Suggestion: Mirror the accessibilityRole, accessibilityLabel, accessibilityHint, and accessibilityState props onto the actually used Button component (frontend/src/components/Button.tsx) and its wrappers (such as EnhancedButton), or instead export ui/Button from the UI index and migrate current Button imports to use that accessible implementation.
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is an **Architect / Logical Review** comment left during a code review. These reviews are first-class, important findings — not optional suggestions. Do NOT dismiss this as a 'big architectural change' just because the title says architect review; most of these can be resolved with a small, localized fix once the intent is understood.
**Path:** frontend/src/components/ui/Button.tsx
**Line:** 89:92
**Comment:**
*HIGH: Accessibility props were added only to frontend/src/components/ui/Button.tsx, but this Button is not imported anywhere; existing flows use frontend/src/components/Button.tsx (e.g., via EnhancedButton, EmptyState, DatabaseSyncStatus), so the new role/label/state behavior will not be applied in normal usage.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
If a suggested approach is provided above, use it as the authoritative instruction. If no explicit code suggestion is given, you MUST still draft and apply your own minimal, localized fix — do not punt back with 'no suggestion provided, review manually'. Keep the change as small as possible: add a guard clause, gate on a loading state, reorder an await, wrap in a conditional, etc. Do not refactor surrounding code or expand scope beyond the finding.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
| accessibilityRole="button" | ||
| accessibilityLabel={accessibilityLabel || title} | ||
| accessibilityHint={accessibilityHint} | ||
| accessibilityState={{ disabled: isDisabled, busy: loading }} |
There was a problem hiding this comment.
Suggestion: This accessibility work is being added to ui/Button.tsx, but that component is not wired into the app's shared button usage (the codebase imports ../Button from frontend/src/components/Button.tsx in multiple consumers). As a result, these new accessibility props will not be applied in real screens. Move the accessibility changes to the actually used shared button component or re-export/switch call sites to this file. [incomplete implementation]
Severity Level: Critical 🚨
- ⚠️ Database sync action buttons lack explicit accessibility state.
- ⚠️ Empty state call-to-action button misses accessibility metadata.
- ⚠️ Storybook Button examples misrepresent real accessibility behavior.Steps of Reproduction ✅
1. Inspect `frontend/src/components/ui/Button.tsx:83-93` and see that the
`TouchableOpacity` now includes `accessibilityRole="button"`,
`accessibilityLabel={accessibilityLabel || title}`,
`accessibilityHint={accessibilityHint}`, and `accessibilityState={{ disabled: isDisabled,
busy: loading }}`.
2. Check `frontend/src/components/ui/index.ts:6-23`, which re-exports UI components such
as `Modal`, `SafeView`, `EmptyState`, `FloatingActionButton`, etc., and note that it does
not export any `Button` from `./Button`, so `ui/Button.tsx` is not available via the
shared `./ui` barrel.
3. Verify that the shared button used across the app is
`frontend/src/components/Button.tsx`, referenced by multiple consumers:
`frontend/src/components/forms/EnhancedButton.tsx:2-7` (`import { Button } from
"../Button";` and `return <Button {...props} />;`),
`frontend/src/components/ui/EmptyState.tsx:10,47-52` (`import { Button } from
"../Button";` and render `<Button ... />`),
`frontend/src/components/DatabaseSyncStatus.tsx:19,305-124` (`import { Button } from
"./Button";` and render `<Button title="Test Connection" ... />` / `<Button title="Refresh
Status" ... />`), and Storybook files `frontend/src/components/Button.stories.tsx:8` and
`frontend/src/components/Card.stories.tsx:10` (`import { Button } from "./Button";`).
4. Open `frontend/src/components/Button.tsx:215-252` and observe that the
`AnimatedTouchableOpacity` rendered by this exported `Button` has `style`, `onPress`,
`onPressIn`, `onPressOut`, `disabled`, and `activeOpacity` props but no
`accessibilityRole`, `accessibilityLabel`, `accessibilityHint`, or `accessibilityState`;
run the app and navigate to any UI that renders these buttons (for example, a screen
embedding `DatabaseSyncStatus` or `EmptyState`) with a screen reader enabled and note that
the buttons do not expose the new accessibility metadata, because all accessibility
changes were made to the unused `frontend/src/components/ui/Button.tsx` instead of the
actually consumed `frontend/src/components/Button.tsx`.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/Button.tsx
**Line:** 89:92
**Comment:**
*Incomplete Implementation: This accessibility work is being added to `ui/Button.tsx`, but that component is not wired into the app's shared button usage (the codebase imports `../Button` from `frontend/src/components/Button.tsx` in multiple consumers). As a result, these new accessibility props will not be applied in real screens. Move the accessibility changes to the actually used shared button component or re-export/switch call sites to this file.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
1 participant
User description
💡 What: Added
accessibilityRole,accessibilityLabel,accessibilityHint, andaccessibilityStateto the sharedButtoncomponent in React Native.🎯 Why: Custom action buttons built with
TouchableOpacitydon't automatically expose crucial states (likebusywhen loading ordisabled) or roles to screen readers. This ensures that anytime theButtoncomponent is used (even as an icon-only button), it provides full context to assistive technologies.♿ Accessibility: Screen readers will now correctly identify the element as a button, announce its disabled or loading states, and read the provided label or hint.
PR created automatically by Jules for task 13421971222961503476 started by @mknoufi
CodeAnt-AI Description
Make shared buttons easier to use with screen readers
What Changed
Impact
✅ Clearer screen reader announcements✅ Fewer missed loading states✅ Easier use of buttons for assistive technology users💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.