🎨 Palette: Add accessibility attributes to icon buttons#145
🎨 Palette: Add accessibility attributes to icon buttons#145TargetMisser wants to merge 1 commit intomainfrom
Conversation
Added `accessible`, `accessibilityRole`, `accessibilityLabel`, and `accessibilityState` attributes to interactive icon-only buttons in the Password and Notepad screens to improve screen reader compatibility and usability. Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 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. |
![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: 12919c47d0
ℹ️ 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".
| style={s.eyeBtn} | ||
| accessible={true} | ||
| accessibilityRole="button" | ||
| accessibilityLabel={revealed ? 'Nascondi password' : 'Mostra password'} |
There was a problem hiding this comment.
This change hard-codes Italian accessibilityLabel values for the password reveal button, so in non-Italian locales (e.g., English) screen readers will announce the control in the wrong language. Since this screen already participates in app localization, the new labels should be sourced from translations to avoid regressing accessibility for users who rely on VoiceOver/TalkBack outside Italian.
Useful? React with 👍 / 👎.
1 participant
💡 What:
Added missing accessibility attributes to icon-only interactive elements in the
PasswordScreen(password visibility toggle) andNotepadScreen(clear and save buttons).🎯 Why:
Icon-only buttons without proper ARIA/accessibility attributes are often ignored or poorly described by screen readers, creating a poor experience for users relying on assistive technologies. Adding semantic roles and labels ensures the intent of each button is clear. Additionally, we've updated the Notepad's disabled 'Save' button to communicate its
accessibilityStatecorrectly.📸 Before/After:
Before:
TouchableOpacityelements wrapping icon buttons lacked accessibility hints.After: The same buttons now declare
accessible={true},accessibilityRole="button", provide localized labels (e.g., 'Mostra password', 'Salva', or clear descriptions), and appropriately describe disabled states.♿ Accessibility:
Improved touch target spacing (
hitSlop), screen reader parsing for visibility toggles, and state interpretation for disabled buttons.PR created automatically by Jules for task 6062746921686655650 started by @TargetMisser