FormidableLabs / eslint-plugin-react-native-a11y

React Native specific accessibility linting rules.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

has-valid-accessibility-state rule doesn't accept functions calls and object properties

JCMartell opened this issue · comments

Hi,

I started using this package and when running it I had some instances where the has-valid-accessibility-state rule gave an error. When looking into some of them, I realized that there's a small issue when you set an accessibilityState property with a function call. For example:

const isFirst : () => boolean = () => { 
    return something === "example";
}

<TouchableOpacity
    accessible
    accessibilityState={{ disabled: isFirst() }}
    disabled={isFirst()}
>
    ...
</TouchableOpacity>

In this example, the has-valid-accessibility-state rule will throw the following error, even though the isFirst function returns a boolean: accessibilityState object: "disabled" value is not a boolean.

Also, I found an instance we I set one of the accessibilityState properties with an object property and got an error. For example:

type MyType = {
    myBool: boolean;
};

const myObj: MyType = {
    myBool: true
};

<TouchableOpacity
    accessible
    accessibilityState={{ checked: myObj.myBool }}
>
    ...
</TouchableOpacity>

The object property is defined as a boolean, but the has-valid-accessibility-state throws the following error:
accessibilityState object: "checked" value is not either a boolean or 'mixed'.

Would it be possible to update the rule so it accepts those situations as well?