Narrator Improvements

src/App.tsx

@@ -11,7 +11,11 @@ import {
   NavigationContainer,
   useNavigationState,
 } from '@react-navigation/native';
-import {createDrawerNavigator, DrawerItem} from '@react-navigation/drawer';
+import {
+  createDrawerNavigator,
+  DrawerItem,
+  getIsDrawerOpenFromState,
+} from '@react-navigation/drawer';
 import RNGalleryList from './RNGalleryList';
 import LightTheme from './themes/LightTheme';
 import DarkTheme from './themes/DarkTheme';
@@ -74,11 +78,14 @@ const styles = StyleSheet.create({
 function RNGalleryScreenWrapper({navigation}) {
   const state = useNavigationState((newState) => newState);
   const Component = RNGalleryList[state.index].component;
+  const isDrawerOpen = getIsDrawerOpenFromState(navigation.getState());
+
   return (
     <View style={styles.container}>
       <TouchableHighlight
         accessibilityRole="button"
-        accessibilityLabel="Navigation bar expand, collapse"
+        accessibilityLabel="Navigation bar"
+        accessibilityState={{expanded: isDrawerOpen}}
         style={{
           backgroundColor: PlatformColor('NavigationViewDefaultPaneBackground'),
           width: 48,
@@ -87,7 +94,8 @@ function RNGalleryScreenWrapper({navigation}) {
         onPress={() => navigation.openDrawer()}>
         <TouchableHighlight
           accessibilityRole="button"
-          accessibilityLabel="Navigation bar expand,collapse"
+          accessibilityLabel="Navigation bar hambuger icon"
+          accessibilityState={{expanded: isDrawerOpen}}
           style={styles.menu}
           onPress={() => navigation.openDrawer()}
           activeOpacity={0.5783}
@@ -113,6 +121,7 @@ function RenderDrawerItem(props, i: number) {
       icon={() => {
         return <Text style={styles.icon}>{RNGalleryList[i].icon}</Text>;
       }}
+      accessibilityLabel={RNGalleryList[i].key}
     />
   );
 }
@@ -133,7 +142,7 @@ function CustomDrawerContent(props) {
     <View style={styles.drawer}>
       <TouchableHighlight
         accessibilityRole="button"
-        accessibilityLabel="Navigation bar expand,collapse"
+        accessibilityLabel="Navigation bar expanded"
         style={styles.menu}
         onPress={() => props.navigation.closeDrawer()}
         activeOpacity={0.5783}
@@ -149,6 +158,7 @@ function CustomDrawerContent(props) {
           return <Text style={styles.icon}>&#xE80F;</Text>;
         }}
         style={styles.drawerBottomDivider}
+        accessibilityLabel={'home'}
       />
       <ScrollView {...props}>{RenderDrawer(props)}</ScrollView>
       <DrawerItem
@@ -160,6 +170,7 @@ function CustomDrawerContent(props) {
           return <Text style={styles.icon}>&#xE713;</Text>;
         }}
         style={styles.drawerTopDivider}
+        accessibilityLabel={'settings'}
       />
     </View>
   );

src/HomePage.tsx

@@ -56,7 +56,7 @@ const HomeContainer = (props: {heading: string; children: React.ReactNode}) => {
   const {colors} = useTheme();
   const styles = createStyles(colors);
   return (
-    <View>
+    <View accessibilityLabel={props.heading + 'components'} focusable={true}>
       <Text style={styles.heading}>{props.heading}</Text>
       <View style={styles.homeContainer}>{props.children}</View>
     </View>

src/examples/PermissionsExamplePage.tsx

@@ -1,5 +1,5 @@
 'use strict';
-import {Button, FlatList, Text, View} from 'react-native';
+import {Button, Text, View} from 'react-native';
 import React, {useEffect, useState} from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
@@ -88,26 +88,20 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
     setPerms(results);
   };
 
-  const requestPermission = (perm: Permission) => {
-    (async () => {
-      try {
-        const result = await request(perm);
-        const newPerms = new Map(perms);
-        newPerms.set(perm, result);
-        setPerms(newPerms);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
+  const renderListItems = (data) => {
+    var listItems = [];
+    data.forEach((item) => {
+      listItems.push(<ListItem item={item} focusable={true} />);
+    });
+    return listItems;
   };
 
-  const getListItem = (item /*: [Permission, PermissionStatus]*/) => {
-    const perm = item[0];
-    const status = item[1];
+  const ListItem = (props: {item}) => {
+    const perm = props.item[0];
+    const [status, setStatus] = useState(props.item[1]);
 
     return (
       <View
-        key={status}
         style={{
           flex: 1,
           flexDirection: 'row',
@@ -118,18 +112,30 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
           <Button onPress={() => {}} color="#737373" title="Granted" />
         ) : (
           <Button
-            onPress={() => requestPermission(perm)}
+            onPress={async () => {
+              try {
+                const result = await request(perm);
+                setStatus(result);
+              } catch (err) {
+                console.log(err);
+              }
+            }}
             color={colors.primary}
             title="Request"
             disabled={status === 'unavailable' || status === 'blocked'}
+            accessibilityLabel={'Request' + perm}
           />
         )}
         <Text style={{fontWeight: 'bold', paddingLeft: 10, color: colors.text}}>
-          {item[0]}
-        </Text>
-        <Text style={{paddingLeft: 10, color: colors.text}}>
-          {getResultString(status)}
+          {perm}
         </Text>
+        <View focusable={getResultString(status) ? true : false}>
+          <Text
+            accessibilityLabel={getResultString(status)}
+            style={{paddingLeft: 10, color: colors.text}}>
+            {getResultString(status)}
+          </Text>
+        </View>
       </View>
     );
   };
@@ -160,12 +166,7 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
             inside the Package.appxmanifest file under Visual Studio.
           </Text>
         </View>
-        <FlatList
-          data={entries}
-          extraData={entries}
-          renderItem={({item}) => getListItem(item)}
-          keyExtractor={(item) => item[0]}
-        />
+        {renderListItems(entries)}
       </Example>
     </Page>
   );