diff options
| author | Ollie H <renahlee@outlook.com> | 2023-05-01 18:38:47 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-05-01 20:38:47 -0500 |
| commit | 83959c595d52ceb7aa4e3f68441c5ac41c389ebc (patch) | |
| tree | 3385d9a16e90fc8d5290ebdef104f922c17642a9 /src/view/com/search/HeaderWithInput.tsx | |
| parent | c75c888de2407d3314cad07989174201313facaa (diff) | |
| download | voidsky-83959c595d52ceb7aa4e3f68441c5ac41c389ebc.tar.zst | |
React Native accessibility (#539)
* React Native accessibility * First round of changes * Latest update * Checkpoint * Wrap up * Lint * Remove unhelpful image hints * Fix navigation * Fix rebase and lint * Mitigate an known issue with the password entry in login * Fix composer dismiss * Remove focus on input elements for web * Remove i and npm * pls work * Remove stray declaration * Regenerate yarn.lock --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Diffstat (limited to 'src/view/com/search/HeaderWithInput.tsx')
| -rw-r--r-- | src/view/com/search/HeaderWithInput.tsx | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/src/view/com/search/HeaderWithInput.tsx b/src/view/com/search/HeaderWithInput.tsx index cc0b90af7..bd92e974a 100644 --- a/src/view/com/search/HeaderWithInput.tsx +++ b/src/view/com/search/HeaderWithInput.tsx @@ -54,7 +54,9 @@ export function HeaderWithInput({ testID="viewHeaderBackOrMenuBtn" onPress={onPressMenu} hitSlop={MENU_HITSLOP} - style={styles.headerMenuBtn}> + style={styles.headerMenuBtn} + accessibilityLabel="Go back" + accessibilityHint="Navigates to the previous screen"> <UserAvatar size={30} avatar={store.me.avatar} /> </TouchableOpacity> <View @@ -80,9 +82,15 @@ export function HeaderWithInput({ onBlur={() => setIsInputFocused(false)} onChangeText={onChangeQuery} onSubmitEditing={onSubmitQuery} + autoFocus={true} + accessibilityRole="search" /> {query ? ( - <TouchableOpacity onPress={onPressClearQuery}> + <TouchableOpacity + onPress={onPressClearQuery} + accessibilityRole="button" + accessibilityLabel="Clear search query" + accessibilityHint=""> <FontAwesomeIcon icon="xmark" size={16} @@ -93,7 +101,9 @@ export function HeaderWithInput({ </View> {query || isInputFocused ? ( <View style={styles.headerCancelBtn}> - <TouchableOpacity onPress={onPressCancelSearchInner}> + <TouchableOpacity + onPress={onPressCancelSearchInner} + accessibilityRole="button"> <Text style={pal.text}>Cancel</Text> </TouchableOpacity> </View> @@ -110,9 +120,10 @@ const styles = StyleSheet.create({ paddingVertical: 4, }, headerMenuBtn: { - width: 40, + width: 30, height: 30, - marginLeft: 6, + borderRadius: 30, + marginHorizontal: 6, }, headerSearchContainer: { flex: 1, |