Fix UIExplorer headings accessibility

This commit is contained in:
Nicolas Gallagher
2018-11-07 21:38:26 -08:00
parent 5db9a765b0
commit 220eb79357
3 changed files with 12 additions and 4 deletions
@@ -14,12 +14,12 @@ class AppText extends React.PureComponent {
}; };
render() { render() {
const { style, ...rest } = this.props; const { accessibilityRole, style, ...rest } = this.props;
const isInAParentText = this.context; const isInAParentText = this.context;
return ( return (
<Text <Text
{...rest} {...rest}
accessibilityRole={rest.href ? 'link' : undefined} accessibilityRole={rest.href ? 'link' : accessibilityRole}
style={[!isInAParentText && styles.baseText, style, rest.href && styles.link]} style={[!isInAParentText && styles.baseText, style, rest.href && styles.link]}
/> />
); );
@@ -8,7 +8,11 @@ import AppText from './AppText';
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
const SectionTitle = ({ children }) => <AppText style={styles.sectionTitle}>{children}</AppText>; const SectionTitle = ({ children }) => (
<AppText accessibilityRole="heading" aria-level="2" style={styles.sectionTitle}>
{children}
</AppText>
);
const Section = ({ children, title }) => ( const Section = ({ children, title }) => (
<View> <View>
@@ -10,7 +10,11 @@ import insertBetween from './insertBetween';
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
const Title = ({ children }) => <AppText style={styles.title}>{children}</AppText>; const Title = ({ children }) => (
<AppText accessibilityRole="heading" style={styles.title}>
{children}
</AppText>
);
export const Description = ({ children }) => ( export const Description = ({ children }) => (
<AppText style={styles.description}> <AppText style={styles.description}>