Skip to content

🎨 Palette: Improve accessibility and placeholder text in NotepadScreen #110

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
TargetMisser wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Improve accessibility and placeholder text in NotepadScreen #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-04-19 - Accessibility roles and labels on icon buttons
**Learning:** Found several generic icon-only `<TouchableOpacity>` buttons that are missing `accessibilityLabel` and `accessibilityRole`. This is a classic accessibility issue in React Native, leading to screen readers announcing "button" without context, or worse, just "clickable". For example, the `clear` button in NotepadScreen has no label.
**Action:** Add `accessible={true}`, `accessibilityRole="button"`, and `accessibilityLabel` to icon-only buttons to make them screen-reader friendly.
4 changes: 2 additions & 2 deletions src/i18n/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const it = {
notepadUnsaved: 'Modifiche non salvate', notepadChars: 'caratteri',
notepadClearTitle: 'Cancella note',
notepadClearMsg: 'Sei sicuro di voler cancellare tutte le note?',
notepadClearConfirm: 'Cancella', notepadPlaceholder: 'Inizia a scrivere...',
notepadClearConfirm: 'Cancella', notepadPlaceholder: 'Scrivi qui le tue note...\n\nUsa questo blocco note per:\n• Annotazioni di turno\n• Promemoria procedure\n• Note personali',
// TravelDoc
traveldocSub: 'Verifica documenti di viaggio',
traveldocLoading: 'Caricamento TravelDoc…',
Expand Down Expand Up @@ -197,7 +197,7 @@ const en: typeof it = {
notepadUnsaved: 'Unsaved changes', notepadChars: 'characters',
notepadClearTitle: 'Clear notes',
notepadClearMsg: 'Are you sure you want to clear all notes?',
notepadClearConfirm: 'Clear', notepadPlaceholder: 'Start writing...',
notepadClearConfirm: 'Clear', notepadPlaceholder: 'Write your notes here...\n\nUse this notepad for:\n• Shift annotations\n• Procedure reminders\n• Personal notes',
// TravelDoc
traveldocSub: 'Travel document check',
traveldocLoading: 'Loading TravelDoc…',
Expand Down
6 changes: 3 additions & 3 deletions src/screens/NotepadScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,12 @@ export default function NotepadScreen() {
<Text style={s.title}>{t('notepadTitle')}</Text>
</View>
<View style={s.actions}>
<TouchableOpacity onPress={clear} style={s.iconBtn}>
<TouchableOpacity onPress={clear} style={s.iconBtn} accessible accessibilityRole="button" accessibilityLabel={t('notepadClearTitle')}>
<MaterialIcons name="delete-outline" size={22} color="#EF4444" />
</TouchableOpacity>
<TouchableOpacity
onPress={save}
style={[s.saveBtn, saved && s.saveBtnDim]}
style={[s.saveBtn, saved && s.saveBtnDim]} accessible accessibilityRole="button" accessibilityState={{ disabled: saved }}
>
<MaterialIcons name="save" size={18} color="#fff" />
<Text style={s.saveTxt}>{saved ? t('notepadSaved') : t('notepadSave')}</Text>
Expand All @@ -137,7 +137,7 @@ export default function NotepadScreen() {
multiline
value={text}
onChangeText={handleChange}
placeholder={'Scrivi qui le tue note...\n\nUsa questo blocco note per:\n• Annotazioni di turno\n• Promemoria procedure\n• Note personali'}
placeholder={t('notepadPlaceholder')}
placeholderTextColor={colors.textSub}
textAlignVertical="top"
autoCorrect={false}
Expand Down
Loading