Merge pull request #1780 from peritus/master

RN: Add accessibility labels to OnDeviceUI
storybookjs · Sep 6, 2017 · db01fac · db01fac
2 parents 7610652 + 4a224d7
commit db01fac
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -124,7 +124,11 @@ export default class OnDeviceUI extends Component {
         <Animated.View style={menuSpacerStyles} />
         <View style={style.previewContainer}>
           <Animated.View style={headerStyles}>
-            <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
+            <TouchableWithoutFeedback
+              onPress={this.menuToggledHandler}
+              testID='Storybook.OnDeviceUI.open'
+              accessibilityLabel='Storybook.OnDeviceUI.open'
+            >
               <View>
                 <Image source={openIcon} style={style.icon} />
               </View>
@@ -140,7 +144,11 @@ export default class OnDeviceUI extends Component {
           </View>
         </View>
         <Animated.View style={menuStyles} onLayout={this.menuLayoutHandler}>
-          <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
+          <TouchableWithoutFeedback
+            onPress={this.menuToggledHandler}
+            testID='Storybook.OnDeviceUI.close'
+            accessibilityLabel='Storybook.OnDeviceUI.close'
+            >
             <View style={style.closeButton}>
               <Image source={closeIcon} style={style.icon} />
             </View>

diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js
@@ -17,7 +17,13 @@ SectionHeader.propTypes = {
 };
 
 const ListItem = ({ title, selected, onPress }) =>
-  <TouchableOpacity key={title} style={style.item} onPress={onPress}>
+  <TouchableOpacity
+    key={title}
+    style={style.item}
+    onPress={onPress}
+    testID={`Storybook.ListItem.${title}`}
+    accessibilityLabel={`Storybook.ListItem.${title}`}
+  >
     <Text style={[style.itemText, selected && style.itemTextSelected]}>
       {title}
     </Text>