fix: Improve accessibility with voiceover and talkback

alexbrazier · Jun 23, 2020 · ed4339b · ed4339b
1 parent 82931b5
commit ed4339b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -25,7 +25,9 @@ export default function App() {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>react-native-network-logger</Text>
+      <Text style={styles.title} accessibilityRole="header">
+        react-native-network-logger
+      </Text>
       <NetworkLogger theme={theme} />
       <View style={styles.bottomView}>
         <Button

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -18,10 +18,14 @@ const Header: React.FC<Props> = ({ children, shareContent }) => {
   const styles = useThemedStyles(themedStyles);
   return (
     <View style={styles.container}>
-      <Text style={styles.header}>{children}</Text>
+      <Text style={styles.header} accessibilityRole="header">
+        {children}
+      </Text>
 
       {shareContent && (
         <TouchableOpacity
+          accessibilityLabel="Share"
+          accessibilityRole="button"
           onPress={() => {
             Share.share({ message: shareContent });
           }}

diff --git a/src/RequestDetails.tsx b/src/RequestDetails.tsx
@@ -104,7 +104,11 @@ const RequestDetails: React.FC<Props> = ({ request, onClose }) => {
           onPress={() => Share.share({ message: getCurlRequest() })}
         />
       </ScrollView>
-      <TouchableOpacity onPress={() => onClose()} style={styles.close}>
+      <TouchableOpacity
+        onPress={onClose}
+        style={styles.close}
+        accessibilityRole="button"
+      >
         <Text style={styles.closeTitle}>Close</Text>
       </TouchableOpacity>
     </View>

diff --git a/src/ResultItem.tsx b/src/ResultItem.tsx
@@ -34,26 +34,39 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress }) => {
     color: getStatusTextColor(status),
     borderColor: getStatusTextColor(status),
   });
+
+  const MaybeTouchable: any = onPress ? TouchableOpacity : View;
+
+  const status = request.status > 0 ? request.status : '-';
+
   return (
-    <TouchableOpacity
+    <MaybeTouchable
       style={[styles.container, style]}
-      onPress={() => {
-        onPress?.();
-      }}
+      {...(onPress && { accessibilityRole: 'button', onPress })}
     >
       <View style={styles.leftContainer}>
-        <Text style={[styles.text, styles.method]}>{request.method}</Text>
-        <Text style={[styles.status, getStatusStyles(request.status)]}>
-          {request.status}
+        <Text
+          style={[styles.text, styles.method]}
+          accessibilityLabel={`Method: ${request.method}`}
+        >
+          {request.method}
+        </Text>
+        <Text
+          style={[styles.status, getStatusStyles(request.status)]}
+          accessibilityLabel={`Response status ${status}`}
+        >
+          {status}
+        </Text>
+        <Text style={styles.text}>
+          {request.duration > 0 ? `${request.duration}ms` : 'pending'}
         </Text>
-        <Text style={styles.text}>{request.duration}ms</Text>
       </View>
       <Text
         style={[styles.text, styles.content, getUrlTextColor(request.status)]}
       >
         {request.url}
       </Text>
-    </TouchableOpacity>
+    </MaybeTouchable>
   );
 };