feat(a11y): label icon-only buttons and inputs for screen readers
Header, message action, send/stop, history, model selector and dark-mode controls had no accessible name (icon-only buttons). Adds roles/labels and selected/disabled state; no visual change.
This commit is contained in:
1 parent
0e5b38fd15
commit
b441339bb4
8 files changed
+84
-7
No files matched your search
@@ -36,6 +36,8 @@ export default function ChatLayout() {
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/chat/history')}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Chat history"
|
||||
style={[styles.headerBtn, { backgroundColor: colors.cardBackground }]}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
@@ -43,6 +45,8 @@ export default function ChatLayout() {
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={clearChat}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="New chat"
|
||||
style={[styles.headerBtn, { backgroundColor: colors.cardBackground }]}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
@@ -53,6 +57,8 @@ export default function ChatLayout() {
|
||||
headerRight: () => (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/settings')}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Settings"
|
||||
style={[styles.headerBtn, { backgroundColor: colors.cardBackground }]}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
|
||||
+10
-1
@@ -20,7 +20,12 @@ export default function HistoryScreen() {
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
|
||||
<View style={[styles.header, { borderBottomColor: colors.border, backgroundColor: colors.backgroundColor }]}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
style={styles.backButton}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Back"
|
||||
>
|
||||
<ArrowLeft size={24} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.title, { color: colors.text }]}>Chat History</Text>
|
||||
@@ -43,6 +48,8 @@ export default function HistoryScreen() {
|
||||
{ backgroundColor: colors.cardBackground, borderColor: colors.border }
|
||||
]}
|
||||
onPress={() => handleLoadChat(item.id)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Open chat: ${item.title}`}
|
||||
>
|
||||
<View style={styles.chatInfo}>
|
||||
<Text style={[styles.chatTitle, { color: colors.text }]} numberOfLines={1}>
|
||||
@@ -55,6 +62,8 @@ export default function HistoryScreen() {
|
||||
<TouchableOpacity
|
||||
style={styles.deleteButton}
|
||||
onPress={() => deleteChatSession(item.id)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Delete chat: ${item.title}`}
|
||||
>
|
||||
<Trash2 size={20} color={colors.errorText} />
|
||||
</TouchableOpacity>
|
||||
|
||||
Reference in new issue
Block a user