feat: aria-value* props support (#1480)

* feat: aria-value* props support

* refactor: tweaks

* chore: fix code cov

Author: mdjastrzebski

src/helpers/__tests__/format-default.test.tsx

@@ -21,6 +21,10 @@ describe('mapPropsForQueryError', () => {
       'aria-labelledby': 'ARIA_LABELLED_BY',
       'aria-modal': true,
       'aria-selected': 'ARIA-SELECTED',
+      'aria-valuemax': 'ARIA-VALUEMAX',
+      'aria-valuemin': 'ARIA-VALUEMIN',
+      'aria-valuenow': 'ARIA-VALUENOW',
+      'aria-valuetext': 'ARIA-VALUETEXT',
       placeholder: 'PLACEHOLDER',
       value: 'VALUE',
       defaultValue: 'DEFAULT_VALUE',

src/helpers/accessiblity.ts

@@ -112,7 +112,9 @@ export function isAccessibilityElement(
   );
 }
 
-export function getAccessibilityRole(element: ReactTestInstance) {
+export function getAccessibilityRole(
+  element: ReactTestInstance
+): string | undefined {
   return element.props.role ?? element.props.accessibilityRole;
 }
 
@@ -134,7 +136,9 @@ export function getAccessibilityLabelledBy(
   );
 }
 
-export function getAccessibilityState(element: ReactTestInstance) {
+export function getAccessibilityState(
+  element: ReactTestInstance
+): AccessibilityState | undefined {
   const {
     accessibilityState,
     'aria-busy': ariaBusy,
@@ -171,3 +175,33 @@ export function getAccessibilityCheckedState(
   const { accessibilityState, 'aria-checked': ariaChecked } = element.props;
   return ariaChecked ?? accessibilityState?.checked;
 }
+
+export function getAccessibilityValue(
+  element: ReactTestInstance
+): AccessibilityValue | undefined {
+  const {
+    accessibilityValue,
+    'aria-valuemax': ariaValueMax,
+    'aria-valuemin': ariaValueMin,
+    'aria-valuenow': ariaValueNow,
+    'aria-valuetext': ariaValueText,
+  } = element.props;
+
+  const hasAnyAccessibilityValueProps =
+    accessibilityValue != null ||
+    ariaValueMax != null ||
+    ariaValueMin != null ||
+    ariaValueNow != null ||
+    ariaValueText != null;
+
+  if (!hasAnyAccessibilityValueProps) {
+    return undefined;
+  }
+
+  return {
+    max: ariaValueMax ?? accessibilityValue?.max,
+    min: ariaValueMin ?? accessibilityValue?.min,
+    now: ariaValueNow ?? accessibilityValue?.now,
+    text: ariaValueText ?? accessibilityValue?.text,
+  };
+}

src/helpers/format-default.ts

@@ -17,6 +17,10 @@ const propsToDisplay = [
   'aria-labelledby',
   'aria-modal',
   'aria-selected',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
   'defaultValue',
   'importantForAccessibility',
   'nativeID',

src/helpers/matchers/accessibilityValue.ts

@@ -1,5 +1,5 @@
-import { AccessibilityValue } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
+import { getAccessibilityValue } from '../accessiblity';
 import { TextMatch } from '../../matches';
 import { matchStringProp } from './matchStringProp';
 
@@ -14,11 +14,11 @@ export function matchAccessibilityValue(
   node: ReactTestInstance,
   matcher: AccessibilityValueMatcher
 ): boolean {
-  const value: AccessibilityValue = node.props.accessibilityValue ?? {};
+  const value = getAccessibilityValue(node);
   return (
-    (matcher.min === undefined || matcher.min === value.min) &&
-    (matcher.max === undefined || matcher.max === value.max) &&
-    (matcher.now === undefined || matcher.now === value.now) &&
-    (matcher.text === undefined || matchStringProp(value.text, matcher.text))
+    (matcher.min === undefined || matcher.min === value?.min) &&
+    (matcher.max === undefined || matcher.max === value?.max) &&
+    (matcher.now === undefined || matcher.now === value?.now) &&
+    (matcher.text === undefined || matchStringProp(value?.text, matcher.text))
   );
 }

src/matchers/__tests__/to-be-checked.test.tsx

@@ -176,3 +176,12 @@ test('throws error for invalid role', () => {
     `"toBeChecked() works only on accessibility elements with "checkbox" or "radio" role."`
   );
 });
+
+test('throws error for non-accessibility element', () => {
+  render(<View testID="test" />);
+
+  const view = screen.getByTestId('test');
+  expect(() => expect(view).toBeChecked()).toThrowErrorMatchingInlineSnapshot(
+    `"toBeChecked() works only on accessibility elements with "checkbox" or "radio" role."`
+  );
+});

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

@@ -307,3 +307,37 @@ test('error message renders the element tree, preserving only helpful props', as
     />"
   `);
 });
+
+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"', () => {
+    const screen = render(<View aria-valuemin={20} />);
+    expect(screen.getByAccessibilityValue({ min: 20 })).toBeTruthy();
+  });
+
+  test('supports "aria-valuenow"', () => {
+    const screen = render(<View aria-valuenow={30} />);
+    expect(screen.getByAccessibilityValue({ now: 30 })).toBeTruthy();
+  });
+
+  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', () => {
+    const screen = render(
+      <View aria-valuenow={50} aria-valuemin={0} aria-valuemax={100} />
+    );
+    expect(
+      screen.getByAccessibilityValue({ now: 50, min: 0, max: 100 })
+    ).toBeTruthy();
+  });
+});

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

@@ -173,4 +173,55 @@ describe('accessibility value', () => {
       </Text>"
     `);
   });
+
+  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', () => {
+    const screen = render(
+      <View accessible role="slider" aria-valuetext="Hello World" />
+    );
+    expect(
+      screen.getByRole('slider', { value: { text: 'Hello World' } })
+    ).toBeTruthy();
+    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', () => {
+    const screen = render(
+      <View
+        accessible
+        role="slider"
+        aria-valuenow={50}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      />
+    );
+    expect(
+      screen.getByRole('slider', { value: { now: 50, min: 0, max: 100 } })
+    ).toBeTruthy();
+  });
 });

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, available value entries include numeric `min`, `max` & `now`, as well as string or regex `text` key. See React Native [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) docs to learn more about this prop.
+`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`
 
@@ -371,7 +371,7 @@ getByA11yValue(
 ): ReactTestInstance;
 ```
 
-Returns a host element with matching `accessibilityValue` prop entries. Only entires provided to the query will be used to match elements. Element might have additional accessibility value entries and still be matched.
+Returns a host element with matching accessibility value based on `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext` & `accessibilityValue` props. Only value entires provided to the query will be used to match elements. Element might have additional accessibility value entries and still be matched.
 
 When querying by `text` entry a string or regex might be used.