Skip to content

Commit

Permalink
Fix sendAccessibilityEvent_unstable Example in RNTester
Browse files Browse the repository at this point in the history
Summary:
# First issue - incorrect ref
In this example, `AccessibilityInfo.setAccessibilityFocus_unstable` is being called on the Button ref. This fails because Button is not a HostComponent and does not accept a forwarded ref.

Since the button needs to be focused in order to click on it, I don't think the intention of this example actually makes sense. Since even if it worked, it would just reset the focus in the same place.

Instead, I alter this to set accessibility focus on the preceding Text element, which makes it more clear that setAccessibilityFocus is working.

# Second Issue - focus after closing Alert doesn't work
I am not sure why this is the case, but removing the alert causes focus to work correctly. i'm guessing the set focus command is conflicting with Alert's default resetting focus behavior.

# Minor Fix
I also quickly cleaned this up to be a function component because class components make refs more confusing (to me).

Changelog:
[Genera] Fix sendAccessibilityEvent_unstable Example in RNTester

Reviewed By: p-sun

Differential Revision: D35725018

fbshipit-source-id: f5a1dbbcf2635f038c41db9ef2a0b31389d2c745
  • Loading branch information
kacieb authored and facebook-github-bot committed Apr 26, 2022
1 parent 8ae9c2c commit ca5e3b1
Showing 1 changed file with 17 additions and 30 deletions.
Expand Up @@ -951,37 +951,24 @@ class AnnounceForAccessibility extends React.Component<{}> {
}
}

class SetAccessibilityFocusExample extends React.Component<{}> {
render(): React.Node {
const myRef: {current: React.ElementRef<any> | null} = createRef();

const onClose = () => {
if (myRef && myRef.current) {
AccessibilityInfo.sendAccessibilityEvent_unstable(
myRef.current,
'focus',
);
}
};
function SetAccessibilityFocusExample(props: {}): React.Node {
const myRef = React.useRef<?React.ElementRef<typeof Text>>(null);

return (
<View>
<Text>SetAccessibilityFocus on native element</Text>
<Button
ref={myRef}
title={'Click'}
onPress={() => {
Alert.alert(
'Set Accessibility Focus',
'Press okay to proceed',
[{text: 'Okay', onPress: onClose}],
{cancelable: true},
);
}}
/>
</View>
);
}
const onPress = () => {
if (myRef && myRef.current) {
AccessibilityInfo.sendAccessibilityEvent_unstable(myRef.current, 'focus');
}
};

return (
<View>
<Text ref={myRef}>
SetAccessibilityFocus on native element. This should get focus after
clicking the button!
</Text>
<Button title={'Click'} onPress={onPress} />
</View>
);
}

class EnabledExamples extends React.Component<{}> {
Expand Down

0 comments on commit ca5e3b1

Please sign in to comment.