feat: handle accessible in byrole

Author: EBAM006

src/helpers/__tests__/accessiblity.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, TextInput, Pressable } from 'react-native';
+import { View, Text, TextInput, Pressable, Switch } from 'react-native';
 import { render, isHiddenFromAccessibility, isInaccessible } from '../..';
 import { isAccessibilityElement } from '../accessiblity';
 
@@ -202,6 +202,11 @@ describe('isAccessibilityElement', () => {
       expect(isAccessibilityElement(element)).toEqual(true);
     });
 
+    test('returns true for Switch component', () => {
+      const element = render(<Switch testID="switch" />).getByTestId('switch');
+      expect(isAccessibilityElement(element)).toEqual(true);
+    });
+
     test('returns false for View component', () => {
       const element = render(<View testID="element" />).getByTestId('element');
       expect(isAccessibilityElement(element)).toEqual(false);

src/helpers/accessiblity.ts

@@ -2,6 +2,7 @@ import {
   AccessibilityState,
   AccessibilityValue,
   StyleSheet,
+  Switch,
   Text,
   TextInput,
 } from 'react-native';
@@ -97,6 +98,7 @@ export function isAccessibilityElement(
 
   return (
     isHostElementForType(element, Text) ||
-    isHostElementForType(element, TextInput)
+    isHostElementForType(element, TextInput) ||
+    isHostElementForType(element, Switch)
   );
 }

src/queries/__tests__/role-value.test.tsx

@@ -6,6 +6,7 @@ describe('accessibility value', () => {
   test('matches using all value props', () => {
     const { getByRole, queryByRole } = render(
       <View
+        accessible
         accessibilityRole="adjustable"
         accessibilityValue={{ min: 0, max: 100, now: 50, text: '50%' }}
       />
@@ -41,6 +42,7 @@ describe('accessibility value', () => {
   test('matches using single value', () => {
     const { getByRole, queryByRole } = render(
       <View
+        accessible
         accessibilityRole="adjustable"
         accessibilityValue={{ min: 10, max: 20, now: 12, text: 'Hello' }}
       />

src/queries/__tests__/role.test.tsx

@@ -733,3 +733,12 @@ test('byRole queries support hidden option', () => {
     `"Unable to find an element with role: "button""`
   );
 });
+
+test('takes accessible prop into account', () => {
+  const { queryByRole } = render(
+    <Pressable accessibilityRole="button" accessible={false}>
+      <Text>Action</Text>
+    </Pressable>
+  );
+  expect(queryByRole('button', { name: 'Action' })).toBeFalsy();
+});

src/queries/role.ts

@@ -3,6 +3,7 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import {
   accessibilityStateKeys,
   accessiblityValueKeys,
+  isAccessibilityElement,
 } from '../helpers/accessiblity';
 import { findAll } from '../helpers/findAll';
 import { matchAccessibilityState } from '../helpers/matchers/accessibilityState';
@@ -65,6 +66,7 @@ const queryAllByRole = (
       (node) =>
         // run the cheapest checks first, and early exit to avoid unneeded computations
         typeof node.type === 'string' &&
+        isAccessibilityElement(node) &&
         matchStringProp(node.props.accessibilityRole, role) &&
         matchAccessibleStateIfNeeded(node, options) &&
         matchAccessibilityValueIfNeeded(node, options?.value) &&