feat: aria-value* props support

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/queries/__tests__/a11yValue.test.tsx

@@ -307,3 +307,37 @@ test('error message renders the element tree, preserving only helpful props', as
     />"
   `);
 });
+
+describe('getByAccessibilityValue "aria-value*" 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__/role-value.test.tsx

@@ -173,4 +173,46 @@ 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();
+  });
+
+  test('supports "aria-valuemin" prop', () => {
+    const screen = render(<View accessible role="slider" aria-valuemin={20} />);
+    expect(screen.getByRole('slider', { value: { min: 20 } })).toBeTruthy();
+  });
+
+  test('supports "aria-valuenow" prop', () => {
+    const screen = render(<View accessible role="slider" aria-valuenow={30} />);
+    expect(screen.getByRole('slider', { value: { now: 30 } })).toBeTruthy();
+  });
+
+  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();
+  });
+
+  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 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.
 
 ### `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.