From b441339bb45fb96f8063cfe0985ee48d0456e931 Mon Sep 17 00:00:00 2001
From: Evandro Fonseca Junior <asemlk54@gmail.com>
Date: Sat, 10 Oct 2026 04:29:33 -0300
Subject: [PATCH] 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.
---
 __tests__/ChatInput.test.tsx           | 39 ++++++++++++++++++++++++++
 app/chat/_layout.tsx                   |  6 ++++
 app/chat/history.tsx                   | 11 +++++++-
 components/chat/ChatInput.tsx          | 13 ++++++++-
 components/chat/CodeBlock.tsx          |  6 +++-
 components/chat/MessageActions.tsx     |  8 +++---
 components/chat/ModelSelector.tsx      |  7 +++++
 components/settings/AppearanceCard.tsx |  1 +
 8 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 __tests__/ChatInput.test.tsx

diff --git a/__tests__/ChatInput.test.tsx b/__tests__/ChatInput.test.tsx
new file mode 100644
index 0000000..2ece3b5
--- /dev/null
+++ b/__tests__/ChatInput.test.tsx
@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { ChatInput } from '../components/chat/ChatInput';
+
+describe('ChatInput', () => {
+    it('sends trimmed text, clears the field and disables send while empty', () => {
+        const onSend = jest.fn();
+        render(<ChatInput onSend={onSend} />);
+
+        expect(screen.getByLabelText('Send message').props.accessibilityState.disabled).toBe(true);
+
+        fireEvent.changeText(screen.getByLabelText('Message'), '  hello  ');
+        fireEvent.press(screen.getByLabelText('Send message'));
+
+        expect(onSend).toHaveBeenCalledWith('hello');
+        expect(screen.getByLabelText('Message').props.value).toBe('');
+    });
+
+    it('shows a stop button instead of send while loading', () => {
+        const onStop = jest.fn();
+        render(<ChatInput onSend={jest.fn()} onStop={onStop} isLoading />);
+
+        expect(screen.queryByLabelText('Send message')).toBeNull();
+        fireEvent.press(screen.getByLabelText('Stop generating'));
+        expect(onStop).toHaveBeenCalledTimes(1);
+    });
+
+    it('fills the field when editing and lets the user cancel', () => {
+        const onCancelEdit = jest.fn();
+        render(<ChatInput onSend={jest.fn()} editingText="old text" onCancelEdit={onCancelEdit} />);
+
+        expect(screen.getByText('Editing message')).toBeTruthy();
+        expect(screen.getByLabelText('Message').props.value).toBe('old text');
+
+        fireEvent.press(screen.getByLabelText('Cancel editing'));
+        expect(onCancelEdit).toHaveBeenCalledTimes(1);
+        expect(screen.getByLabelText('Message').props.value).toBe('');
+    });
+});
diff --git a/app/chat/_layout.tsx b/app/chat/_layout.tsx
index 291f819..288c55f 100644
--- a/app/chat/_layout.tsx
+++ b/app/chat/_layout.tsx
@@ -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}
                                 >
diff --git a/app/chat/history.tsx b/app/chat/history.tsx
index afca7a3..6d438fb 100644
--- a/app/chat/history.tsx
+++ b/app/chat/history.tsx
@@ -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>
diff --git a/components/chat/ChatInput.tsx b/components/chat/ChatInput.tsx
index 761ee70..8e19bda 100644
--- a/components/chat/ChatInput.tsx
+++ b/components/chat/ChatInput.tsx
@@ -65,7 +65,12 @@ export function ChatInput({ onSend, onStop, isLoading, editingText, onCancelEdit
             {isEditing && (
                 <View style={[styles.editBanner, { backgroundColor: colors.bannerBg, borderBottomColor: colors.border }]}>
                     <Text style={[styles.editBannerText, { color: colors.bannerText }]}>Editing message</Text>
-                    <TouchableOpacity onPress={handleCancelEdit} style={styles.editCancelBtn}>
+                    <TouchableOpacity
+                        onPress={handleCancelEdit}
+                        style={styles.editCancelBtn}
+                        accessibilityRole="button"
+                        accessibilityLabel="Cancel editing"
+                    >
                         <X size={16} color={colors.textMuted} />
                     </TouchableOpacity>
                 </View>
@@ -80,6 +85,7 @@ export function ChatInput({ onSend, onStop, isLoading, editingText, onCancelEdit
                     <TextInput
                         style={[styles.input, { color: colors.text }]}
                         placeholder="Send a message..."
+                        accessibilityLabel="Message"
                         placeholderTextColor={colors.textMuted}
                         value={text}
                         onChangeText={setText}
@@ -94,6 +100,8 @@ export function ChatInput({ onSend, onStop, isLoading, editingText, onCancelEdit
                             style={[styles.stopButton, { backgroundColor: colors.errorText }]}
                             onPress={handleStop}
                             activeOpacity={0.7}
+                            accessibilityRole="button"
+                            accessibilityLabel="Stop generating"
                         >
                             <Square size={16} color={colors.backgroundColor} />
                         </TouchableOpacity>
@@ -106,6 +114,9 @@ export function ChatInput({ onSend, onStop, isLoading, editingText, onCancelEdit
                             onPress={handleSend}
                             disabled={!text.trim()}
                             activeOpacity={0.7}
+                            accessibilityRole="button"
+                            accessibilityLabel="Send message"
+                            accessibilityState={{ disabled: !text.trim() }}
                         >
                             <Send size={18} color={text.trim() ? colors.backgroundColor : colors.textMuted} />
                         </TouchableOpacity>
diff --git a/components/chat/CodeBlock.tsx b/components/chat/CodeBlock.tsx
index e03bbca..18d866d 100644
--- a/components/chat/CodeBlock.tsx
+++ b/components/chat/CodeBlock.tsx
@@ -16,7 +16,11 @@ export function CodeBlock({ language, content, copied, onCopy }: CodeBlockProps)
         <View style={styles.codeBlockWrapper}>
             <View style={styles.codeBlockHeader}>
                 <Text style={styles.codeBlockLanguage}>{language}</Text>
-                <TouchableOpacity onPress={() => onCopy(content)} style={styles.copyButton}>
+                <TouchableOpacity
+                    onPress={() => onCopy(content)}
+                    style={styles.copyButton}
+                    accessibilityRole="button"
+                >
                     <CopyIcon size={14} color="#A0A0A0" />
                     <Text style={styles.copyText}>{copied ? 'Copied!' : 'Copy'}</Text>
                 </TouchableOpacity>
diff --git a/components/chat/MessageActions.tsx b/components/chat/MessageActions.tsx
index 9e0804a..9f59837 100644
--- a/components/chat/MessageActions.tsx
+++ b/components/chat/MessageActions.tsx
@@ -50,24 +50,24 @@ export function MessageActions({
 
     return (
         <View style={[styles.container, isUser ? styles.containerUser : styles.containerAssistant]}>
-            <TouchableOpacity style={styles.actionBtn} onPress={handleCopy} activeOpacity={0.6}>
+            <TouchableOpacity style={styles.actionBtn} onPress={handleCopy} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel="Copy message">
                 <Copy size={16} color={colors.textMuted} />
             </TouchableOpacity>
 
             {isUser && onEdit && (
-                <TouchableOpacity style={styles.actionBtn} onPress={handleEdit} activeOpacity={0.6}>
+                <TouchableOpacity style={styles.actionBtn} onPress={handleEdit} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel="Edit message">
                     <Pencil size={16} color={colors.textMuted} />
                 </TouchableOpacity>
             )}
 
             {!isUser && onRegenerate && (
-                <TouchableOpacity style={styles.actionBtn} onPress={handleRegenerate} activeOpacity={0.6}>
+                <TouchableOpacity style={styles.actionBtn} onPress={handleRegenerate} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel="Regenerate response">
                     <RefreshCw size={16} color={colors.textMuted} />
                 </TouchableOpacity>
             )}
 
             {onDelete && (
-                <TouchableOpacity style={styles.actionBtn} onPress={handleDelete} activeOpacity={0.6}>
+                <TouchableOpacity style={styles.actionBtn} onPress={handleDelete} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel="Delete message">
                     <Trash2 size={16} color={colors.textMuted} />
                 </TouchableOpacity>
             )}
diff --git a/components/chat/ModelSelector.tsx b/components/chat/ModelSelector.tsx
index ddefbce..a5f2acb 100644
--- a/components/chat/ModelSelector.tsx
+++ b/components/chat/ModelSelector.tsx
@@ -42,6 +42,8 @@ export function ModelSelector() {
                 style={[styles.headerButton, { backgroundColor: colors.cardBackground }]}
                 onPress={() => setModalVisible(true)}
                 activeOpacity={0.7}
+                accessibilityRole="button"
+                accessibilityLabel={`Model: ${activeModelName}. Tap to change`}
             >
                 <ConnectionBadge isConnected={isConnected} compact />
                 <Text style={[styles.headerText, { color: colors.text }]} numberOfLines={1}>
@@ -70,6 +72,8 @@ export function ModelSelector() {
                                 onPress={handleRefresh}
                                 style={[styles.refreshButton, { backgroundColor: colors.cardBackground }]}
                                 disabled={isRefreshing}
+                                accessibilityRole="button"
+                                accessibilityLabel="Refresh models"
                             >
                                 {isRefreshing ? (
                                     <ActivityIndicator size="small" color={colors.textMuted} />
@@ -108,6 +112,9 @@ export function ModelSelector() {
                                             isSelected && { borderColor: colors.tint }
                                         ]}
                                         onPress={() => handleSelect(item.id)}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={item.id}
+                                        accessibilityState={{ selected: isSelected }}
                                     >
                                         <View style={styles.itemContent}>
                                             <Text style={[styles.itemName, { color: colors.text }]}>
diff --git a/components/settings/AppearanceCard.tsx b/components/settings/AppearanceCard.tsx
index e86cda3..5acbf95 100644
--- a/components/settings/AppearanceCard.tsx
+++ b/components/settings/AppearanceCard.tsx
@@ -29,6 +29,7 @@ export function AppearanceCard() {
                 <Switch
                     value={isDarkMode}
                     onValueChange={toggleTheme}
+                    accessibilityLabel="Dark Mode"
                     trackColor={{ false: '#E2E8F0', true: colors.tint }}
                     thumbColor={'#FFFFFF'}
                 />