From 4e04428e26df9076413b57b3346a7ce357de1a77 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Wed, 22 Aug 2018 15:16:06 -0700
Subject: [PATCH] Add accessibility props to card

---
 src/views/StackView/StackViewCard.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/views/StackView/StackViewCard.js b/src/views/StackView/StackViewCard.js
index b9d3f1e7a..bb6bf307e 100644
--- a/src/views/StackView/StackViewCard.js
+++ b/src/views/StackView/StackViewCard.js
@@ -1,10 +1,25 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import { Screen } from './screens';
 import createPointerEventsContainer from './createPointerEventsContainer';
 
 const EPS = 1e-5;
 
+function getAccessibilityProps(isActive) {
+  if (Platform.OS === 'ios') {
+    return {
+      accessibilityElementsHidden: !isActive,
+      accessible: isActive,
+    };
+  } else if (Platform.OS === 'android') {
+    return {
+      importantForAccessibility: isActive ? 'yes' : 'no-hide-descendants',
+    };
+  } else {
+    return null;
+  }
+}
+
 /**
  * Component that renders the scene as card for the <StackView />.
  */
@@ -15,19 +30,21 @@ class Card extends React.Component {
       pointerEvents,
       style,
       position,
-      scene: { index },
+      scene: { index, isActive },
     } = this.props;
     const active = position.interpolate({
       inputRange: [index, index + 1 - EPS, index + 1],
       outputRange: [1, 1, 0],
       extrapolate: 'clamp',
     });
+
     return (
       <Screen
         pointerEvents={pointerEvents}
         ref={this.props.onComponentRef}
         style={[styles.main, style]}
         active={active}
+        {...getAccessibilityProps(isActive)}
       >
         {children}
       </Screen>