Skip to content

Commit

Permalink
updating examples in AccessibilityExample
Browse files Browse the repository at this point in the history
This example feels a bit odd to me. The state itself is not concatenated into the announcement, which makes sense, as it would lead to potentially announcing conflicting state if two child elements had separate states like "checked" and "unchecked", but because of this I'm not sure what value this example is providing. If there was no state here and just the label it would work the exact same way.
I think we can probably just remove this one and maybe replace it with one where the parent element has a state and making sure that state is reflected even when the children are combined into it.
#33690 (comment)
#33690 (comment)

I don't think importantForAccessibility="yes" is necessary for any of these examples, so lets remove it on all of them just to make it clear that this isn't a prequalification for this feature working.
#33690 (comment)

Remove duplicate example (this is the same as the previous one)
#33690 (comment)
  • Loading branch information
fabOnReact committed Aug 30, 2022
1 parent eac460e commit ddfb345
Showing 1 changed file with 23 additions and 41 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -255,10 +255,7 @@ class AutomaticContentGrouping extends React.Component<{}> {
return (
<View>
<RNTesterBlock title="Parent and children have different role">
<TouchableNativeFeedback
accessible={true}
importantForAccessibility="yes"
accessibilityRole="button">
<TouchableNativeFeedback accessible={true} accessibilityRole="button">
<View accessible={false}>
<Text accessibilityRole="image" accessible={false}>
Text number 1 with a role
Expand All @@ -271,7 +268,6 @@ class AutomaticContentGrouping extends React.Component<{}> {
<RNTesterBlock title="Parent has accessibilityAction cut, copy and paste">
<TouchableNativeFeedback
accessible={true}
importantForAccessibility="yes"
accessibilityActions={[
{name: 'cut', label: 'cut label'},
{name: 'copy', label: 'copy label'},
Expand Down Expand Up @@ -300,6 +296,26 @@ class AutomaticContentGrouping extends React.Component<{}> {
</TouchableNativeFeedback>
</RNTesterBlock>

<RNTesterBlock title="Talkback only pulls the child's contentDescription or text but does not include the child's accessibilityState or accessibilityRole. TalkBack avoids announcements of conflicting states or roles (for example, 'button' and 'slider').">
<View
accessible={true}
accessibilityRole="button"
accessibilityState={{checked: true}}>
<Text
accessible={false}
accessibilityState={{checked: true, disabled: false}}>
Text number 1
</Text>
<Text
style={styles.smallRedSquare}
accessible={false}
accessibilityState={{checked: false, disabled: true}}
accessibilityLabel="This child Text does not have text, but has an accessibilityLabel and accessibilityState. The child accessibility state disabled is not announced."
accessibilityRole="image"
/>
</View>
</RNTesterBlock>

<RNTesterBlock title="One of the child has accessibilityLabel, role, state, and accValue">
<View accessible={true} accessibilityRole="button">
<View>
Expand All @@ -319,10 +335,7 @@ class AutomaticContentGrouping extends React.Component<{}> {
</RNTesterBlock>

<RNTesterBlock title="With child TextInput">
<TouchableNativeFeedback
accessible={true}
importantForAccessibility="yes"
accessibilityRole="button">
<TouchableNativeFeedback accessible={true} accessibilityRole="button">
<TextInput
value="this is the value"
accessible={false}
Expand All @@ -333,10 +346,7 @@ class AutomaticContentGrouping extends React.Component<{}> {
</RNTesterBlock>

<RNTesterBlock title="Three levels of nested Components">
<TouchableNativeFeedback
accessible={true}
importantForAccessibility="yes"
accessibilityRole="button">
<TouchableNativeFeedback accessible={true} accessibilityRole="button">
<Text accessible={false}>
Text number 2
<Text accessible={false}>
Expand All @@ -361,34 +371,6 @@ class AutomaticContentGrouping extends React.Component<{}> {
</TouchableNativeFeedback>
</RNTesterBlock>

<RNTesterBlock title="The child is not TextInput, the contentDescription is not empty and does not have nodeText">
<TouchableNativeFeedback
onPress={() => console.warn('onPress child')}
accessible={true}
accessibilityRole="button">
<View>
<Text
style={styles.smallRedSquare}
accessibilityLabel="this is the child Text accessibilityLabel"
accessible={false}
/>
</View>
</TouchableNativeFeedback>
</RNTesterBlock>

<RNTesterBlock title="One of the child has accessibilityState (hasStateDescription triggers the announcement)">
<View accessible={true} accessibilityRole="button">
<Text accessible={false}>Text number 1</Text>
<Text
style={styles.smallRedSquare}
accessible={false}
accessibilityState={{checked: true}}
accessibilityLabel="this child Text does not have text, but has state and should be announced by TalkBack"
accessibilityRole="image"
/>
</View>
</RNTesterBlock>

<RNTesterBlock title="One of the child has accessibilityHint (hasText triggers the announcement)">
<View accessible={true} accessibilityRole="button">
<Text
Expand Down

0 comments on commit ddfb345

Please sign in to comment.