[change] Remove deprecated accessibility APIs

Removes 'accessible', 'accessibilityState', and 'accessibilityValue' props.

Author: necolas

packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 import ActivityIndicator from '..';
 import React from 'react';

packages/react-native-web/src/exports/ActivityIndicator/index.js

@@ -14,8 +14,6 @@ import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
 
-const accessibilityValue = { max: 1, min: 0 };
-
 const createSvgCircle = (style) => (
   <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
 );
@@ -59,7 +57,8 @@ const ActivityIndicator: React.AbstractComponent<
     <View
       {...other}
       accessibilityRole="progressbar"
-      accessibilityValue={accessibilityValue}
+      accessibilityValueMax={1}
+      accessibilityValueMin={0}
       ref={forwardedRef}
       style={[styles.container, style]}
     >

packages/react-native-web/src/exports/Modal/ModalContent.js

@@ -47,7 +47,12 @@ const ModalContent: React.AbstractComponent<
   }, [transparent]);
 
   return (
-    <View accessibilityRole={active ? 'dialog' : null} aria-modal ref={forwardedRef} style={style}>
+    <View
+      accessibilityModal={true}
+      accessibilityRole={active ? 'dialog' : null}
+      ref={forwardedRef}
+      style={style}
+    >
       <View style={styles.container}>{children}</View>
     </View>
   );

packages/react-native-web/src/exports/ProgressBar/index.js

@@ -36,32 +36,24 @@ const ProgressBar: React.AbstractComponent<
   } = props;
 
   const percentageProgress = progress * 100;
-
-  const progressRef = React.useRef(null);
-  React.useEffect(() => {
-    const width = indeterminate ? '25%' : `${percentageProgress}%`;
-    if (progressRef.current != null) {
-      progressRef.current.setNativeProps({
-        style: { width }
-      });
-    }
-  }, [indeterminate, percentageProgress, progressRef]);
+  const width = indeterminate ? '25%' : `${percentageProgress}%`;
 
   return (
     <View
       {...other}
       accessibilityRole="progressbar"
-      accessibilityValue={{
-        max: 100,
-        min: 0,
-        now: indeterminate ? null : percentageProgress
-      }}
+      accessibilityValueMax={100}
+      accessibilityValueMin={0}
+      accessibilityValueNow={indeterminate ? null : percentageProgress}
       ref={ref}
       style={[styles.track, style, { backgroundColor: trackColor }]}
     >
       <View
-        ref={progressRef}
-        style={[styles.progress, indeterminate && styles.animation, { backgroundColor: color }]}
+        style={[
+          { backgroundColor: color, width },
+          styles.progress,
+          indeterminate && styles.animation
+        ]}
       />
     </View>
   );

packages/react-native-web/src/exports/Text/types.js

@@ -72,19 +72,6 @@ export type TextProps = {
     | 'listitem'
     | 'none'
     | 'text',
-  accessibilityState?: {
-    busy?: ?boolean,
-    checked?: ?boolean | 'mixed',
-    disabled?: ?boolean,
-    expanded?: ?boolean,
-    grabbed?: ?boolean,
-    hidden?: ?boolean,
-    invalid?: ?boolean,
-    pressed?: ?boolean,
-    readonly?: ?boolean,
-    required?: ?boolean,
-    selected?: ?boolean
-  },
   dir?: 'auto' | 'ltr' | 'rtl',
   numberOfLines?: ?number,
   onPress?: (e: any) => void,

packages/react-native-web/src/exports/View/types.js

@@ -113,27 +113,8 @@ export type ViewStyle = {
 
 export type ViewProps = {
   ...AccessibilityProps,
-  accessibilityState?: {
-    busy?: ?boolean,
-    checked?: ?boolean | 'mixed',
-    disabled?: ?boolean,
-    expanded?: ?boolean,
-    grabbed?: ?boolean,
-    hidden?: ?boolean,
-    invalid?: ?boolean,
-    modal?: ?boolean,
-    pressed?: ?boolean,
-    readonly?: ?boolean,
-    required?: ?boolean,
-    selected?: ?boolean
-  },
-  accessibilityValue?: {
-    max?: ?number,
-    min?: ?number,
-    now?: ?number,
-    text?: ?string
-  },
   children?: ?any,
+  dir?: 'ltr' | 'rtl',
   focusable?: ?boolean,
   nativeID?: ?string,
   onBlur?: (e: any) => void,

packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap

@@ -118,43 +118,6 @@ describe('modules/createDOMProps', () => {
     expect(props.role).toEqual('button');
   });
 
-  describe('prop "accessibilityState"', () => {
-    function createAccessibilityState(value) {
-      return {
-        busy: value,
-        checked: value,
-        disabled: value,
-        expanded: value,
-        grabbed: value,
-        hidden: value,
-        invalid: value,
-        modal: value,
-        pressed: value,
-        readonly: value,
-        required: value,
-        selected: value
-      };
-    }
-
-    test('values are "undefined"', () => {
-      const accessibilityState = createAccessibilityState(undefined);
-      const props = createProps({ accessibilityState });
-      expect(props).toMatchSnapshot();
-    });
-
-    test('values are "false"', () => {
-      const accessibilityState = createAccessibilityState(false);
-      const props = createProps({ accessibilityState });
-      expect(props).toMatchSnapshot();
-    });
-
-    test('values are "true"', () => {
-      const accessibilityState = createAccessibilityState(true);
-      const props = createProps({ accessibilityState });
-      expect(props).toMatchSnapshot();
-    });
-  });
-
   test('prop "className" is preserved', () => {
     const className = 'external-class-name';
     const props = createProps({ className });
@@ -172,16 +135,4 @@ describe('modules/createDOMProps', () => {
     const props = createProps({ testID });
     expect(props['data-testid']).toEqual(testID);
   });
-
-  test('includes cursor style for pressable roles', () => {
-    expect(createDOMProps('span', { accessibilityRole: 'link' }).className).toMatchSnapshot();
-    expect(createDOMProps('span', { accessibilityRole: 'button' }).className).toMatchSnapshot();
-  });
-
-  test('includes base reset style for browser-styled elements', () => {
-    expect(createDOMProps('a').className).toMatchSnapshot();
-    expect(createDOMProps('button').className).toMatchSnapshot();
-    expect(createDOMProps('li').className).toMatchSnapshot();
-    expect(createDOMProps('ul').className).toMatchSnapshot();
-  });
 });

packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js

@@ -123,45 +123,15 @@ const createDOMProps = (elementType, props) => {
     pointerEvents,
     style: providedStyle,
     testID,
-    // Deprecated
-    accessible,
-    accessibilityState,
-    accessibilityValue,
+    isRTL,
     // Rest
     ...domProps
   } = props;
 
-  const disabled =
-    (accessibilityState != null && accessibilityState.disabled === true) || accessibilityDisabled;
+  const disabled = accessibilityDisabled;
 
   const role = AccessibilityUtil.propsToAriaRole(props);
 
-  // DEPRECATED
-  if (accessibilityState != null) {
-    for (const prop in accessibilityState) {
-      const value = accessibilityState[prop];
-      if (value != null) {
-        if (prop === 'disabled' || prop === 'hidden') {
-          if (value === true) {
-            domProps[`aria-${prop}`] = value;
-            // also set prop directly to pick up host elementType behaviour
-            domProps[prop] = value;
-          }
-        } else {
-          domProps[`aria-${prop}`] = value;
-        }
-      }
-    }
-  }
-  if (accessibilityValue != null) {
-    for (const prop in accessibilityValue) {
-      const value = accessibilityValue[prop];
-      if (value != null) {
-        domProps[`aria-value${prop}`] = value;
-      }
-    }
-  }
-
   // ACCESSIBILITY
   if (accessibilityActiveDescendant != null) {
     domProps['aria-activedescendant'] = accessibilityActiveDescendant;
@@ -336,36 +306,35 @@ const createDOMProps = (elementType, props) => {
 
   // FOCUS
   // "focusable" indicates that an element may be a keyboard tab-stop.
-  const _focusable = focusable != null ? focusable : accessible;
-  if (_focusable === false) {
+  if (focusable === false) {
     domProps.tabIndex = '-1';
   }
   if (
-    // These native elements are focusable by default
+    // These native elements are keyboard focusable by default
     elementType === 'a' ||
     elementType === 'button' ||
     elementType === 'input' ||
     elementType === 'select' ||
     elementType === 'textarea'
   ) {
-    if (_focusable === false || accessibilityDisabled === true) {
+    if (focusable === false || accessibilityDisabled === true) {
       domProps.tabIndex = '-1';
     }
   } else if (
-    // These roles are made focusable by default
+    // These roles are made keyboard focusable by default
     role === 'button' ||
     role === 'checkbox' ||
     role === 'link' ||
     role === 'radio' ||
     role === 'textbox' ||
     role === 'switch'
   ) {
-    if (_focusable !== false) {
+    if (focusable !== false) {
       domProps.tabIndex = '0';
     }
   } else {
     // Everything else must explicitly set the prop
-    if (_focusable === true) {
+    if (focusable === true) {
       domProps.tabIndex = '0';
     }
   }

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -64,11 +64,7 @@ export const accessibilityProps = {
   accessibilityValueNow: true,
   accessibilityValueText: true,
   dir: true,
-  focusable: true,
-  // Deprecated
-  accessible: true,
-  accessibilityState: true,
-  accessibilityValue: true
+  focusable: true
 };
 
 export const clickProps = {