🎨 Palette: Add accessibility labels to icon-only buttons in PasswordScreen#45
🎨 Palette: Add accessibility labels to icon-only buttons in PasswordScreen#45TargetMisser wants to merge 2 commits intomainfrom
Conversation
…creen 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. |
…creen Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Adds screen-reader support for icon-only actions in PasswordScreen by labeling previously unlabeled touch targets.
Changes:
- Added
accessible,accessibilityRole="button", andaccessibilityLabelto the PIN pad backspace button. - Added
accessibility*props to show/hide password, edit, and delete icon buttons. - Added a short internal palette note documenting the accessibility pattern.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/screens/PasswordScreen.tsx |
Adds accessibility labels/roles to icon-only TouchableOpacity buttons so screen readers can announce their purpose. |
.jules/palette.md |
Documents the accessibility labeling approach for future similar UI additions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <TouchableOpacity | ||
| key={i} | ||
| style={s.key} | ||
| onPress={del} | ||
| activeOpacity={0.7} | ||
| accessible={true} | ||
| accessibilityRole="button" | ||
| accessibilityLabel="Cancella ultima cifra" | ||
| > |
There was a problem hiding this comment.
accessibilityLabel is hardcoded in Italian, but the app supports multiple languages via useLanguage()/translations.ts. Screen-reader labels should be localized (e.g., add a translation key for the PIN backspace/delete action and use t(...) here) so English users don't get Italian announcements.
| <TouchableOpacity | ||
| onPress={() => setRevealed(r => !r)} | ||
| style={s.eyeBtn} | ||
| accessible={true} | ||
| accessibilityRole="button" | ||
| accessibilityLabel={revealed ? "Nascondi password" : "Mostra password"} | ||
| > |
There was a problem hiding this comment.
These new accessibilityLabel values are hardcoded in Italian. Since this screen already uses useLanguage()/t(...) elsewhere, please move these labels into src/i18n/translations.ts and use localized keys (for both "show"/"hide" states) so screen readers announce the correct language.
| <TouchableOpacity | ||
| style={s.editBtn} | ||
| onPress={onEdit} | ||
| accessible={true} | ||
| accessibilityRole="button" | ||
| accessibilityLabel="Modifica password" | ||
| > | ||
| <MaterialIcons name="edit" size={17} color={colors.primary} /> | ||
| </TouchableOpacity> | ||
| <TouchableOpacity style={s.delBtn} onPress={onDelete}> | ||
| <TouchableOpacity | ||
| style={s.delBtn} | ||
| onPress={onDelete} | ||
| accessible={true} | ||
| accessibilityRole="button" | ||
| accessibilityLabel="Elimina password" | ||
| > |
There was a problem hiding this comment.
accessibilityLabel for edit/delete is hardcoded in Italian. To avoid mixed-language announcements when lang === 'en', add translation keys and source the labels via t(...) (either by calling useLanguage() in PasswordRow or by passing localized strings in as props).
| style={s.eyeModal} | ||
| accessible={true} | ||
| accessibilityRole="button" | ||
| accessibilityLabel={showPw ? "Nascondi password" : "Mostra password"} |
There was a problem hiding this comment.
This accessibilityLabel is hardcoded in Italian and duplicates the show/hide label logic used in PasswordRow. Consider introducing shared i18n keys (e.g., showPassword/hidePassword) and using t(...) here to keep screen-reader announcements localized and consistent.
| accessibilityLabel={showPw ? "Nascondi password" : "Mostra password"} | |
| accessibilityLabel={t(showPw ? 'hidePassword' : 'showPassword')} |
💡 What: Added
accessible={true},accessibilityRole="button", andaccessibilityLabelproperties to the icon-onlyTouchableOpacitybuttons (such as show/hide password, edit, delete, and PIN pad backspace) within thePasswordScreen.🎯 Why: To significantly improve the experience for visually impaired users relying on screen readers. Previously, these icon-only buttons lacked descriptive labels, making it impossible for screen readers to convey their function.
📸 Before/After: Not applicable (non-visual structural/accessibility change).
♿ Accessibility: Screen readers will now correctly announce the purpose of these interactive elements rather than reading them as unlabelled buttons.
PR created automatically by Jules for task 57779452387514474 started by @TargetMisser