search

root-two / react-native-drawer

React Native Drawer
MIT License
2.54k stars 391 forks source link

Accessibility doesn't work with the Drawer #332

Open MaxToyberman opened 6 years ago

MaxToyberman commented 6 years ago

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

SuhairZain commented 6 years ago

@MaxToyberman Have you found a solution to this issue?

MaxToyberman commented 6 years ago

@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