react-native-windows 0.70.8 → 0.71.0-preview.1

package/Libraries/Components/View/View.js

@@ -10,8 +10,10 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import ViewNativeComponent from './ViewNativeComponent';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
+import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
+import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 
 export type Props = ViewProps;
@@ -26,13 +28,94 @@ export type Props = ViewProps;
 const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
-> = React.forwardRef((props: ViewProps, forwardedRef) => {
-  return (
-    <TextAncestor.Provider value={false}>
-      <ViewNativeComponent {...props} ref={forwardedRef} />
-    </TextAncestor.Provider>
-  );
-});
+> = React.forwardRef(
+  (
+    {
+      accessibilityElementsHidden,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityLiveRegion,
+      accessibilityRole,
+      accessibilityState,
+      accessibilityValue,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-live': ariaLive,
+      'aria-selected': ariaSelected,
+      'aria-valuemax': ariaValueMax,
+      'aria-valuemin': ariaValueMin,
+      'aria-valuenow': ariaValueNow,
+      'aria-valuetext': ariaValueText,
+      focusable,
+      id,
+      importantForAccessibility,
+      nativeID,
+      pointerEvents,
+      role,
+      style,
+      tabIndex,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
+    const _accessibilityLabelledBy =
+      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
+
+    const _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+
+    const _accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
+
+    const flattenedStyle = flattenStyle(style);
+    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+
+    return (
+      <TextAncestor.Provider value={false}>
+        <ViewNativeComponent
+          {...otherProps}
+          accessibilityLiveRegion={
+            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+          }
+          accessibilityLabel={ariaLabel ?? accessibilityLabel}
+          focusable={tabIndex !== undefined ? !tabIndex : focusable}
+          accessibilityState={_accessibilityState}
+          accessibilityRole={
+            role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+          }
+          accessibilityElementsHidden={
+            ariaHidden ?? accessibilityElementsHidden
+          }
+          accessibilityLabelledBy={_accessibilityLabelledBy}
+          accessibilityValue={_accessibilityValue}
+          importantForAccessibility={
+            ariaHidden === true
+              ? 'no-hide-descendants'
+              : importantForAccessibility
+          }
+          nativeID={id ?? nativeID}
+          style={style}
+          pointerEvents={newPointerEvents}
+          ref={forwardedRef}
+        />
+      </TextAncestor.Provider>
+    );
+  },
+);
 
 View.displayName = 'View';
 

package/Libraries/Components/View/View.windows.js

@@ -10,8 +10,10 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import ViewNativeComponent from './ViewNativeComponent';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
+import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
+import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 import invariant from 'invariant'; // [Windows]
 // [Windows
@@ -30,114 +32,199 @@ export type Props = ViewProps;
 const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
-> = React.forwardRef((props: ViewProps, forwardedRef) => {
-  const _keyDown = (event: KeyEvent) => {
-    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyDownEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
-          event.stopPropagation();
-        }
-      }
-    }
-    props.onKeyDown && props.onKeyDown(event);
-  };
+> = React.forwardRef(
+  (
+    {
+      accessibilityElementsHidden,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityLiveRegion,
+      accessibilityRole,
+      accessibilityState,
+      accessibilityValue,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-live': ariaLive,
+      'aria-selected': ariaSelected,
+      'aria-valuemax': ariaValueMax,
+      'aria-valuemin': ariaValueMin,
+      'aria-valuenow': ariaValueNow,
+      'aria-valuetext': ariaValueText,
+      focusable,
+      id,
+      importantForAccessibility,
+      nativeID,
+      pointerEvents,
+      role,
+      style,
+      tabIndex,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
+    const _accessibilityLabelledBy =
+      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
+
+    const _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
 
-  const _keyUp = (event: KeyEvent) => {
-    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
-          event.stopPropagation();
+    const _accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
+
+    const flattenedStyle = flattenStyle(style);
+    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+
+    const _keyDown = (event: KeyEvent) => {
+      if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
+        // $FlowFixMe - keyDownEvents was already checked to not be undefined
+        for (const el of otherProps.keyDownEvents) {
+          if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
+            event.stopPropagation();
+          }
         }
       }
-    }
-    props.onKeyUp && props.onKeyUp(event);
-  };
+      otherProps.onKeyDown && otherProps.onKeyDown(event);
+    };
 
-  const _keyDownCapture = (event: KeyEvent) => {
-    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyDownEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
-          event.stopPropagation();
+    const _keyUp = (event: KeyEvent) => {
+      if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
+        // $FlowFixMe - keyDownEvents was already checked to not be undefined
+        for (const el of otherProps.keyUpEvents) {
+          if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
+            event.stopPropagation();
+          }
         }
       }
-    }
-    props.onKeyDownCapture && props.onKeyDownCapture(event);
-  };
+      otherProps.onKeyUp && otherProps.onKeyUp(event);
+    };
 
-  const _keyUpCapture = (event: KeyEvent) => {
-    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
-          event.stopPropagation();
+    const _keyDownCapture = (event: KeyEvent) => {
+      if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
+        // $FlowFixMe - keyDownEvents was already checked to not be undefined
+        for (const el of otherProps.keyDownEvents) {
+          if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+            event.stopPropagation();
+          }
         }
       }
-    }
-    props.onKeyUpCapture && props.onKeyUpCapture(event);
-  };
+      otherProps.onKeyDownCapture && otherProps.onKeyDownCapture(event);
+    };
 
-  // [Windows
-  const childrenWithImportantForAccessibility = children => {
-    const updatedChildren = React.Children.map(children, child => {
-      if (React.isValidElement(child)) {
-        if (child.props.children) {
-          return React.cloneElement(child, {
-            accessible: false,
-            children: childrenWithImportantForAccessibility(
-              child.props.children,
-            ),
-          });
-        } else {
-          return React.cloneElement(child, {accessible: false});
+    const _keyUpCapture = (event: KeyEvent) => {
+      if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
+        // $FlowFixMe - keyDownEvents was already checked to not be undefined
+        for (const el of otherProps.keyUpEvents) {
+          if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+            event.stopPropagation();
+          }
         }
       }
-      return child;
-    });
-    if (updatedChildren.length == 1) {
-      return updatedChildren[0];
-    } else {
-      return updatedChildren;
-    }
-  };
-  // Windows]
+      otherProps.onKeyUpCapture && otherProps.onKeyUpCapture(event);
+    };
 
-  return (
     // [Windows
-    // In core this is a TextAncestor.Provider value={false} See
-    // https://github.com/facebook/react-native/commit/66601e755fcad10698e61d20878d52194ad0e90c
-    // But since Views are not currently supported in Text, we do not need the extra provider
-    <TextAncestor.Consumer>
-      {hasTextAncestor => {
-        invariant(
-          !hasTextAncestor,
-          'Nesting of <View> within <Text> is not currently supported.',
-        );
-        return (
-          <ViewNativeComponent
-            {...props}
-            ref={forwardedRef}
-            onKeyDown={_keyDown}
-            onKeyDownCapture={_keyDownCapture}
-            onKeyUp={_keyUp}
-            onKeyUpCapture={_keyUpCapture}
-            // [Windows
-            accessible={
-              props.importantForAccessibility === 'no-hide-descendants'
-                ? false
-                : props.accessible
-            }
-            children={
-              props.importantForAccessibility === 'no-hide-descendants'
-                ? childrenWithImportantForAccessibility(props.children)
-                : props.children
-            }
-            // Windows]
-          />
-        );
-      }}
-    </TextAncestor.Consumer>
+    // $FlowFixMe - children typing
+    const childrenWithImportantForAccessibility = children => {
+      const updatedChildren = React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+          if (child.props.children) {
+            return React.cloneElement(child, {
+              accessible: false,
+              children: childrenWithImportantForAccessibility(
+                child.props.children,
+              ),
+            });
+          } else {
+            return React.cloneElement(child, {accessible: false});
+          }
+        }
+        return child;
+      });
+      if (updatedChildren.length == 1) {
+        return updatedChildren[0];
+      } else {
+        return updatedChildren;
+      }
+    };
     // Windows]
-  );
-});
+
+    return (
+      // [Windows
+      // In core this is a TextAncestor.Provider value={false} See
+      // https://github.com/facebook/react-native/commit/66601e755fcad10698e61d20878d52194ad0e90c
+      // But since Views are not currently supported in Text, we do not need the extra provider
+      <TextAncestor.Consumer>
+        {hasTextAncestor => {
+          invariant(
+            !hasTextAncestor,
+            'Nesting of <View> within <Text> is not currently supported.',
+          );
+          return (
+            <ViewNativeComponent
+              {...otherProps}
+              accessibilityLiveRegion={
+                ariaLive === 'off'
+                  ? 'none'
+                  : ariaLive ?? accessibilityLiveRegion
+              }
+              accessibilityLabel={ariaLabel ?? accessibilityLabel}
+              focusable={tabIndex !== undefined ? !tabIndex : focusable}
+              accessibilityState={_accessibilityState}
+              accessibilityRole={
+                role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+              }
+              accessibilityElementsHidden={
+                ariaHidden ?? accessibilityElementsHidden
+              }
+              accessibilityLabelledBy={_accessibilityLabelledBy}
+              accessibilityValue={_accessibilityValue}
+              importantForAccessibility={
+                ariaHidden === true
+                  ? 'no-hide-descendants'
+                  : importantForAccessibility
+              }
+              nativeID={id ?? nativeID}
+              style={style}
+              pointerEvents={newPointerEvents}
+              ref={forwardedRef}
+              onKeyDown={_keyDown}
+              onKeyDownCapture={_keyDownCapture}
+              onKeyUp={_keyUp}
+              onKeyUpCapture={_keyUpCapture}
+              // [Windows
+              accessible={
+                importantForAccessibility === 'no-hide-descendants'
+                  ? false
+                  : otherProps.accessible
+              }
+              children={
+                importantForAccessibility === 'no-hide-descendants'
+                  ? childrenWithImportantForAccessibility(otherProps.children)
+                  : otherProps.children
+              }
+              // Windows]
+            />
+          );
+        }}
+      </TextAncestor.Consumer>
+      // Windows]
+    );
+  },
+);
 
 View.displayName = 'View';