From 8ea0eb4021feff3664e82e36de8698179d32d45c Mon Sep 17 00:00:00 2001
From: TatianaKapos <tatianakapos@microsoft.com>
Date: Wed, 6 Jul 2022 10:31:55 -0700
Subject: [PATCH 1/4] narrator improvements

---
 src/App.tsx      | 13 +++++++++----
 src/HomePage.tsx |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5552f94d..9c039b52 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,7 @@ 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 +74,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 +90,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}
@@ -129,11 +133,12 @@ function RenderDrawer(props) {
 
 // @ts-ignore
 function CustomDrawerContent(props) {
+
   return (
     <View style={styles.drawer}>
       <TouchableHighlight
         accessibilityRole="button"
-        accessibilityLabel="Navigation bar expand,collapse"
+        accessibilityLabel="Navigation bar"
         style={styles.menu}
         onPress={() => props.navigation.closeDrawer()}
         activeOpacity={0.5783}
diff --git a/src/HomePage.tsx b/src/HomePage.tsx
index 04eb00e4..df8f17c4 100644
--- a/src/HomePage.tsx
+++ b/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>

From 4d966a67d8e25b4d2f559e8e7533c04eae1c7680 Mon Sep 17 00:00:00 2001
From: TatianaKapos <tatianakapos@microsoft.com>
Date: Wed, 6 Jul 2022 11:05:26 -0700
Subject: [PATCH 2/4] yarn lint

---
 src/App.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9c039b52..c1c81410 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,11 @@ import {
   NavigationContainer,
   useNavigationState,
 } from '@react-navigation/native';
-import {createDrawerNavigator, DrawerItem, getIsDrawerOpenFromState} 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';
@@ -81,7 +85,7 @@ function RNGalleryScreenWrapper({navigation}) {
       <TouchableHighlight
         accessibilityRole="button"
         accessibilityLabel="Navigation bar"
-        accessibilityState={{expanded: isDrawerOpen }}
+        accessibilityState={{expanded: isDrawerOpen}}
         style={{
           backgroundColor: PlatformColor('NavigationViewDefaultPaneBackground'),
           width: 48,
@@ -91,7 +95,7 @@ function RNGalleryScreenWrapper({navigation}) {
         <TouchableHighlight
           accessibilityRole="button"
           accessibilityLabel="Navigation bar hambuger icon"
-          accessibilityState={{expanded: isDrawerOpen }}
+          accessibilityState={{expanded: isDrawerOpen}}
           style={styles.menu}
           onPress={() => navigation.openDrawer()}
           activeOpacity={0.5783}
@@ -133,7 +137,6 @@ function RenderDrawer(props) {
 
 // @ts-ignore
 function CustomDrawerContent(props) {
-
   return (
     <View style={styles.drawer}>
       <TouchableHighlight

From 863197d62b4c00105ad22840601d1de6a16f7a31 Mon Sep 17 00:00:00 2001
From: TatianaKapos <tatianakapos@microsoft.com>
Date: Thu, 7 Jul 2022 17:27:57 -0700
Subject: [PATCH 3/4] narrator works with permissions

---
 src/App.tsx                             |  5 ++-
 src/examples/PermissionsExamplePage.tsx | 48 ++++++++++++-------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c1c81410..cf55474a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -121,6 +121,7 @@ function RenderDrawerItem(props, i: number) {
       icon={() => {
         return <Text style={styles.icon}>{RNGalleryList[i].icon}</Text>;
       }}
+      accessibilityLabel={RNGalleryList[i].key}
     />
   );
 }
@@ -141,7 +142,7 @@ function CustomDrawerContent(props) {
     <View style={styles.drawer}>
       <TouchableHighlight
         accessibilityRole="button"
-        accessibilityLabel="Navigation bar"
+        accessibilityLabel="Navigation bar expanded"
         style={styles.menu}
         onPress={() => props.navigation.closeDrawer()}
         activeOpacity={0.5783}
@@ -157,6 +158,7 @@ function CustomDrawerContent(props) {
           return <Text style={styles.icon}>&#xE80F;</Text>;
         }}
         style={styles.drawerBottomDivider}
+        accessibilityLabel={'home'}
       />
       <ScrollView {...props}>{RenderDrawer(props)}</ScrollView>
       <DrawerItem
@@ -168,6 +170,7 @@ function CustomDrawerContent(props) {
           return <Text style={styles.icon}>&#xE713;</Text>;
         }}
         style={styles.drawerTopDivider}
+        accessibilityLabel={'settings'}
       />
     </View>
   );
diff --git a/src/examples/PermissionsExamplePage.tsx b/src/examples/PermissionsExamplePage.tsx
index a1806715..92e58922 100644
--- a/src/examples/PermissionsExamplePage.tsx
+++ b/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,22 @@ 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:  Array<[Permission, PermissionStatus]>) => {
+    var listItems: JSX.Element[] = [];
+    data.forEach((item) => {
+      listItems.push(
+        <ListItem item={item} focusable={true}></ListItem>
+      )
+    });
+    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 +114,24 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
           <Button onPress={() => {}} color="#737373" title="Granted" />
         ) : (
           <Button
-            onPress={() => requestPermission(perm)}
+          onPress={async () => {
+            const result = await request(perm);
+            setStatus(result);
+          }}
             color={colors.primary}
             title="Request"
             disabled={status === 'unavailable' || status === 'blocked'}
+            accessibilityLabel={'Request' + perm}
           />
         )}
         <Text style={{fontWeight: 'bold', paddingLeft: 10, color: colors.text}}>
-          {item[0]}
+          {perm}
         </Text>
-        <Text style={{paddingLeft: 10, color: colors.text}}>
+        <View accessibilityLabel={getResultString(status)} focusable={true}>
+        <Text accessibilityLabel={getResultString(status)} style={{paddingLeft: 10, color: colors.text}}>
           {getResultString(status)}
         </Text>
+        </View>
       </View>
     );
   };
@@ -160,12 +162,8 @@ 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>
   );

From 38a73ff77839fd25d6678a649fb0db18d1f36912 Mon Sep 17 00:00:00 2001
From: TatianaKapos <tatianakapos@microsoft.com>
Date: Fri, 8 Jul 2022 14:25:19 -0700
Subject: [PATCH 4/4] fix lint error

---
 src/examples/PermissionsExamplePage.tsx | 31 ++++++++++++++-----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/examples/PermissionsExamplePage.tsx b/src/examples/PermissionsExamplePage.tsx
index 92e58922..f4f73d41 100644
--- a/src/examples/PermissionsExamplePage.tsx
+++ b/src/examples/PermissionsExamplePage.tsx
@@ -88,12 +88,10 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
     setPerms(results);
   };
 
-  const renderListItems = (data:  Array<[Permission, PermissionStatus]>) => {
-    var listItems: JSX.Element[] = [];
+  const renderListItems = (data) => {
+    var listItems = [];
     data.forEach((item) => {
-      listItems.push(
-        <ListItem item={item} focusable={true}></ListItem>
-      )
+      listItems.push(<ListItem item={item} focusable={true} />);
     });
     return listItems;
   };
@@ -114,10 +112,14 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
           <Button onPress={() => {}} color="#737373" title="Granted" />
         ) : (
           <Button
-          onPress={async () => {
-            const result = await request(perm);
-            setStatus(result);
-          }}
+            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'}
@@ -127,10 +129,12 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
         <Text style={{fontWeight: 'bold', paddingLeft: 10, color: colors.text}}>
           {perm}
         </Text>
-        <View accessibilityLabel={getResultString(status)} focusable={true}>
-        <Text accessibilityLabel={getResultString(status)} style={{paddingLeft: 10, color: colors.text}}>
-          {getResultString(status)}
-        </Text>
+        <View focusable={getResultString(status) ? true : false}>
+          <Text
+            accessibilityLabel={getResultString(status)}
+            style={{paddingLeft: 10, color: colors.text}}>
+            {getResultString(status)}
+          </Text>
         </View>
       </View>
     );
@@ -163,7 +167,6 @@ export const PermissionsExamplePage: React.FunctionComponent<{}> = () => {
           </Text>
         </View>
         {renderListItems(entries)}
-
       </Example>
     </Page>
   );