Fix buggy implementation

Author: AugustinLF

src/queries/__tests__/role.test.tsx

@@ -234,6 +234,17 @@ describe('supports accessibility states', () => {
 
       expect(getByRole('button', { disabled: false })).toBeTruthy();
     });
+
+    test('does not return disabled elements when querying for non disabled', () => {
+      const { queryByRole } = render(
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityState={{ disabled: true }}
+        ></TouchableOpacity>
+      );
+
+      expect(queryByRole('button', { disabled: false })).toBe(null);
+    });
   });
 
   describe('selected', () => {
@@ -287,6 +298,17 @@ describe('supports accessibility states', () => {
 
       expect(getByRole('tab', { selected: false })).toBeTruthy();
     });
+
+    test('does not return selected elements when querying for non selected', () => {
+      const { queryByRole } = render(
+        <TouchableOpacity
+          accessibilityRole="tab"
+          accessibilityState={{ selected: true }}
+        ></TouchableOpacity>
+      );
+
+      expect(queryByRole('tab', { selected: false })).toBe(null);
+    });
   });
 
   describe('checked', () => {
@@ -312,6 +334,17 @@ describe('supports accessibility states', () => {
       expect(getByRole('checkbox', { checked: 'mixed' })).toBeTruthy();
     });
 
+    it('does not return mixed checkboxes when querying for checked: true', () => {
+      const { queryByRole } = render(
+        <TouchableOpacity
+          accessibilityRole="checkbox"
+          accessibilityState={{ checked: 'mixed' }}
+        />
+      );
+
+      expect(queryByRole('checkbox', { checked: false })).toBe(null);
+    });
+
     test('returns the correct element when only one matches all the requirements', () => {
       const { getByRole } = render(
         <>
@@ -351,6 +384,17 @@ describe('supports accessibility states', () => {
 
       expect(getByRole('checkbox', { checked: false })).toBeTruthy();
     });
+
+    test('does not return checked elements when querying for non checked', () => {
+      const { queryByRole } = render(
+        <TouchableOpacity
+          accessibilityRole="checkbox"
+          accessibilityState={{ checked: true }}
+        ></TouchableOpacity>
+      );
+
+      expect(queryByRole('checkbox', { checked: false })).toBe(null);
+    });
   });
 
   describe('busy', () => {
@@ -404,6 +448,17 @@ describe('supports accessibility states', () => {
 
       expect(getByRole('button', { busy: false })).toBeTruthy();
     });
+
+    test('does not return busy elements when querying for non busy', () => {
+      const { queryByRole } = render(
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityState={{ selected: true }}
+        ></TouchableOpacity>
+      );
+
+      expect(queryByRole('button', { selected: false })).toBe(null);
+    });
   });
 
   describe('expanded', () => {
@@ -457,6 +512,17 @@ describe('supports accessibility states', () => {
 
       expect(getByRole('button', { expanded: false })).toBeTruthy();
     });
+
+    test('does not return expanded elements when querying for non expanded', () => {
+      const { queryByRole } = render(
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityState={{ expanded: true }}
+        ></TouchableOpacity>
+      );
+
+      expect(queryByRole('button', { expanded: false })).toBe(null);
+    });
   });
 
   test('matches an element combining all the options', () => {

src/queries/role.ts

@@ -57,11 +57,11 @@ const queryAllByRole = (
       return accessibilityStates.every((accessibilityState) => {
         const queriedState = options?.[accessibilityState];
 
-        // test for true instead of `undefined`, because `{disabled: false} should match
-        // a button without a disable state`
-        if (queriedState === true) {
+        if (typeof queriedState !== 'undefined') {
           return (
-            queriedState === node.props.accessibilityState?.[accessibilityState]
+            queriedState ===
+            // default to false because disabled:undefined is equivalent to disabled:false
+            (node.props.accessibilityState?.[accessibilityState] ?? false)
           );
         } else {
           return true;