Add accessibility props to card

This commit is contained in:
Brent Vatne 2018-08-22 15:16:06 -07:00
parent 6a76bf6703
commit 4e04428e26
1 changed files with 19 additions and 2 deletions

View File

@ -1,10 +1,25 @@
import React from 'react'; import React from 'react';
import { StyleSheet } from 'react-native'; import { StyleSheet, Platform } from 'react-native';
import { Screen } from './screens'; import { Screen } from './screens';
import createPointerEventsContainer from './createPointerEventsContainer'; import createPointerEventsContainer from './createPointerEventsContainer';
const EPS = 1e-5; 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 />. * Component that renders the scene as card for the <StackView />.
*/ */
@ -15,19 +30,21 @@ class Card extends React.Component {
pointerEvents, pointerEvents,
style, style,
position, position,
scene: { index }, scene: { index, isActive },
} = this.props; } = this.props;
const active = position.interpolate({ const active = position.interpolate({
inputRange: [index, index + 1 - EPS, index + 1], inputRange: [index, index + 1 - EPS, index + 1],
outputRange: [1, 1, 0], outputRange: [1, 1, 0],
extrapolate: 'clamp', extrapolate: 'clamp',
}); });
return ( return (
<Screen <Screen
pointerEvents={pointerEvents} pointerEvents={pointerEvents}
ref={this.props.onComponentRef} ref={this.props.onComponentRef}
style={[styles.main, style]} style={[styles.main, style]}
active={active} active={active}
{...getAccessibilityProps(isActive)}
> >
{children} {children}
</Screen> </Screen>