From 8e06b0f9faa2b516b82d2e10940ee40756611c8b Mon Sep 17 00:00:00 2001
From: Aaron Cannon <cannona@fireantproductions.com>
Date: Mon, 24 Apr 2017 13:29:04 -0500
Subject: [PATCH] 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        | 8 ++++----
 packages/react-navigation/src/views/HeaderBackButton.js | 7 ++++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/react-navigation/src/views/CardStack.js b/packages/react-navigation/src/views/CardStack.js
index 2e7f0a06..c20999aa 100644
--- a/packages/react-navigation/src/views/CardStack.js
+++ b/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 : {};
 
diff --git a/packages/react-navigation/src/views/HeaderBackButton.js b/packages/react-navigation/src/views/HeaderBackButton.js
index 16283bc2..23af608d 100644
--- a/packages/react-navigation/src/views/HeaderBackButton.js
+++ b/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>