Force the back button to be recognized as such by screen readers. (#1155)

* Force the back button to be recognized as such by screen readers.

* Update HeaderBackButton.js

* Update HeaderBackButton.js

* Update HeaderBackButton.js

* Format remaining issues

packages/react-navigation/src/views/CardStack.js

@@ -334,10 +334,10 @@ class CardStack extends Component {
     });
 
     const { options } = this._getScreenDetails(scene);
-    const gesturesEnabled = mode === 'card' && (
-        typeof options.gesturesEnabled === 'boolean' ? options.gesturesEnabled
-        : Platform.OS === 'ios'
-    )
+    const gesturesEnabled = mode === 'card' &&
+      (typeof options.gesturesEnabled === 'boolean'
+        ? options.gesturesEnabled
+        : Platform.OS === 'ios');
 
     const handlers = gesturesEnabled ? responder.panHandlers : {};
 

packages/react-navigation/src/views/HeaderBackButton.js

@@ -67,11 +67,16 @@ class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
       ? this.state.initialTextWidth > width
       : false;
 
+    const backButtonTitle = renderTruncated ? truncatedTitle : title;
+
     // eslint-disable-next-line global-require
     const asset = require('./assets/back-icon.png');
 
     return (
       <TouchableItem
+        accessibilityComponentType="button"
+        accessibilityLabel={backButtonTitle}
+        accessibilityTraits="button"
         delayPressIn={0}
         onPress={onPress}
         pressColor={pressColorAndroid}
@@ -90,7 +95,7 @@ class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
               style={[styles.title, { color: tintColor }]}
               numberOfLines={1}
             >
-              {renderTruncated ? truncatedTitle : title}
+              {backButtonTitle}
             </Text>}
         </View>
       </TouchableItem>