refactor: tweaks

Author: mdjastrzebski

src/matchers/to-be-checked.tsx

@@ -35,9 +35,11 @@ export function toBeChecked(
   };
 }
 
-const VALID_ROLES = new Set(['checkbox', 'radio']);
-
 function hasValidAccessibilityRole(element: ReactTestInstance) {
+  if (!isAccessibilityElement(element)) {
+    return false;
+  }
+
   const role = getAccessibilityRole(element);
-  return isAccessibilityElement(element) && VALID_ROLES.has(role);
+  return role === 'checkbox' || role === 'radio';
 }

src/queries/__tests__/a11yValue.test.tsx

@@ -308,31 +308,31 @@ test('error message renders the element tree, preserving only helpful props', as
   `);
 });
 
-describe('getByAccessibilityValue "aria-value*" props', () => {
-  test('supports aria-valuemax', () => {
+describe('getByAccessibilityValue supports "aria-*" props', () => {
+  test('supports "aria-valuemax"', () => {
     const screen = render(<View aria-valuemax={10} />);
     expect(screen.getByAccessibilityValue({ max: 10 })).toBeTruthy();
   });
 
-  test('supports aria-valuemin', () => {
+  test('supports "aria-valuemin"', () => {
     const screen = render(<View aria-valuemin={20} />);
     expect(screen.getByAccessibilityValue({ min: 20 })).toBeTruthy();
   });
 
-  test('supports aria-valuenow', () => {
+  test('supports "aria-valuenow"', () => {
     const screen = render(<View aria-valuenow={30} />);
     expect(screen.getByAccessibilityValue({ now: 30 })).toBeTruthy();
   });
 
-  test('supports aria-valuetext', () => {
+  test('supports "aria-valuetext"', () => {
     const screen = render(<View aria-valuetext="Hello World" />);
     expect(
       screen.getByAccessibilityValue({ text: 'Hello World' })
     ).toBeTruthy();
     expect(screen.getByAccessibilityValue({ text: /hello/i })).toBeTruthy();
   });
 
-  test('supports multiple aria-value* props', () => {
+  test('supports multiple "aria-value*" props', () => {
     const screen = render(
       <View aria-valuenow={50} aria-valuemin={0} aria-valuemax={100} />
     );

src/queries/__tests__/makeQueries.test.tsx

@@ -71,6 +71,10 @@ describe('printing element tree', () => {
         aria-labelledby="ARIA_LABELLED_BY"
         aria-modal={true}
         aria-selected={false}
+        aria-valuemax={30}
+        aria-valuemin={10}
+        aria-valuenow={20}
+        aria-valuetext="Hello Value"
         importantForAccessibility="yes"
         nativeID="NATIVE_ID"
         role="summary"

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

@@ -177,16 +177,19 @@ describe('accessibility value', () => {
   test('supports "aria-valuemax" prop', () => {
     const screen = render(<View accessible role="slider" aria-valuemax={10} />);
     expect(screen.getByRole('slider', { value: { max: 10 } })).toBeTruthy();
+    expect(screen.queryByRole('slider', { value: { max: 20 } })).toBeNull();
   });
 
   test('supports "aria-valuemin" prop', () => {
     const screen = render(<View accessible role="slider" aria-valuemin={20} />);
     expect(screen.getByRole('slider', { value: { min: 20 } })).toBeTruthy();
+    expect(screen.queryByRole('slider', { value: { min: 30 } })).toBeNull();
   });
 
   test('supports "aria-valuenow" prop', () => {
     const screen = render(<View accessible role="slider" aria-valuenow={30} />);
     expect(screen.getByRole('slider', { value: { now: 30 } })).toBeTruthy();
+    expect(screen.queryByRole('slider', { value: { now: 10 } })).toBeNull();
   });
 
   test('supports "aria-valuetext" prop', () => {
@@ -199,9 +202,15 @@ describe('accessibility value', () => {
     expect(
       screen.getByRole('slider', { value: { text: /hello/i } })
     ).toBeTruthy();
+    expect(
+      screen.queryByRole('slider', { value: { text: 'Hello' } })
+    ).toBeNull();
+    expect(
+      screen.queryByRole('slider', { value: { text: /salut/i } })
+    ).toBeNull();
   });
 
-  test('supports multiple aria-value* props', () => {
+  test('supports multiple "aria-value*" props', () => {
     const screen = render(
       <View
         accessible

website/docs/Queries.md

@@ -121,7 +121,7 @@ const element3 = screen.getByRole('button', { name: 'Hello', disabled: true });
 
 `expanded`: You can filter elements by their expanded state (coming either from `aria-expanded` prop or `accessbilityState.expanded` prop). The possible values are `true` or `false`. See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `expanded` state.
 
-`value`: Filter elements by their accessibility value, based on either `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext` or accessibilityValue props. Accessiblity value conceptually consist of numeric `min`, `max` and `now` values, as well as string `text` value. See React Native [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) docs to learn more about the accessibility value.
+`value`: Filter elements by their accessibility value, based on either `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext` or `accessibilityValue` props. Accessiblity value conceptually consists of numeric `min`, `max` and `now` entries, as well as string `text` entry. See React Native [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) docs to learn more about the accessibility value concept.
 
 ### `ByText`