Add accessibility props to card
This commit is contained in:
parent
6a76bf6703
commit
4e04428e26
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue