root-two/react-native-drawer

Accessibility doesn't work with the Drawer

MaxToyberman opened this issue · 2 comments

My app supports Accessibility, but when the Drawer is opened everything behind the drawer is being focused (Drawer behavior should be like a Modal behavior only the Drawer should be focused)
drawer

@MaxToyberman Have you found a solution to this issue?

@SuhairZain Actually I found a solution.
on Android you have 2 possible solutions:

  1. you can use DrawerLayoutAndroid from react-native ,which is the native android component,(you don't need to anything there) it just works.

2)You can give the View behind the drawer the importantForAccessibility property
like this :

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            importantForAccessibility: "auto"
         }
     }
<View importantForAccessibility={this.state.importantForAccessibility}>

</View>
}

then, when you open your drawer you do this.setState({importantForAccessibility:"no-hide-descendants"})

when you close the drawer you do this.setState({importantForAccessibility:"auto"}) again.

according to the docs this will force accessibility services to ignore the component and all of its children.

on Ios the solution is very simple:
Just give your Drawer accessibilityViewIsModal

I have issued a PR for ios you can see it here
https://github.com/root-two/react-native-drawer/pull/351

I hope it helps