🎨 Palette: Accessibility improvements for Checkbox and Radio controls#173
🎨 Palette: Accessibility improvements for Checkbox and Radio controls#173mknoufi wants to merge 1 commit into
Conversation
…components - Modified `Checkbox` and `Radio` core components to accept and apply `accessibilityLabel` and `accessibilityHint`. - Added `accessibilityRole="checkbox"` and `accessibilityRole="radio"` respectively to the underlying `TouchableOpacity`. - Added dynamic `accessibilityState` mapping to track `checked` and `disabled` states for screen readers. - Recorded a learning in `.Jules/palette.md` noting that custom React Native UI components built using `TouchableOpacity` fail to behave natively for screen readers without explicitly mapping roles and states. 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:S
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a9d7e737bf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| disabled={disabled} | ||
| activeOpacity={0.7} | ||
| accessibilityRole="checkbox" | ||
| accessibilityState={{ checked: checked || indeterminate, disabled }} |
There was a problem hiding this comment.
When indeterminate is true, this sets accessibilityState.checked to true via checked || indeterminate, so screen readers will announce the control as simply checked instead of mixed. In React Native, mixed checkboxes should expose checked: "mixed"; otherwise users relying on assistive tech cannot distinguish partially selected state from fully selected state.
Useful? React with 👍 / 👎.
|
|
CodeAnt AI finished reviewing your PR. |
1 participant
User description
🎨 Palette: Accessibility improvements for Checkbox and Radio controls
💡 What:
Added explicit
accessibilityRole,accessibilityState,accessibilityLabel, andaccessibilityHintprops to the customCheckboxandRadiocomponents in the design system.🎯 Why:
These custom components were built using a generic
TouchableOpacity, which provides no semantic meaning or state context to screen readers out of the box. By explicitly identifying them as checkboxes/radios and tracking their state (checked,disabled), screen reader users can now successfully navigate and interact with forms that use these controls.♿ Accessibility:
accessibilityRole="checkbox"toCheckbox.tsx.accessibilityRole="radio"toRadio.tsx.accessibilityState={{ checked, disabled }}to both controls so their active status is announced dynamically.accessibilityLabelandaccessibilityHintprops, with a safe fallback to the component's visual text label.PR created automatically by Jules for task 200396649432273131 started by @mknoufi
CodeAnt-AI Description
Make custom checkbox and radio controls readable and usable with screen readers
What Changed
Impact
✅ Clearer form controls for screen reader users✅ Fewer accessibility errors in custom inputs✅ Easier selection of checkbox and radio options💡 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.