rfc: Adopting Async React in React Aria Components

jest.config.js

@@ -94,7 +94,8 @@ module.exports = {
     '^bundle-text:.*\\.svg$': '<rootDir>/__mocks__/fileMock.js',
     '\\.svg$': '<rootDir>/__mocks__/svg.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
-    '\\.(css|styl)$': 'identity-obj-proxy'
+    '\\.(css|styl)$': 'identity-obj-proxy',
+    'vanilla-starter/(.*)': '<rootDir>/starters/docs/src/$1'
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

packages/@adobe/react-spectrum/src/button/Button.tsx

@@ -90,7 +90,10 @@ export const Button = React.forwardRef(function Button<T extends ElementType = '
     ...otherProps
   } = props;
   let domRef = useFocusableRef(ref);
-  let {buttonProps, isPressed} = useButton(props, domRef);
+  let {buttonProps, isPressed} = useButton({
+    ...props,
+    isPending: false // handled differently than RAC
+  }, domRef);
   let {hoverProps, isHovered} = useHover({isDisabled});
   let [isFocused, onFocusChange] = useState(false);
   let {focusProps} = useFocus({onFocusChange, isDisabled});

packages/@adobe/react-spectrum/src/color/ColorField.tsx

@@ -75,6 +75,7 @@ function ColorChannelField(props: ColorChannelFieldProps) {
     value,          // eslint-disable-line @typescript-eslint/no-unused-vars
     defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars
     onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars
+    changeAction,   // eslint-disable-line @typescript-eslint/no-unused-vars
     validate,       // eslint-disable-line @typescript-eslint/no-unused-vars
     forwardedRef,
     ...otherProps
@@ -111,6 +112,7 @@ function HexColorField(props: HexColorFieldProps) {
     value,          // eslint-disable-line @typescript-eslint/no-unused-vars
     defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars
     onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars
+    changeAction,   // eslint-disable-line @typescript-eslint/no-unused-vars
     forwardedRef,
     ...otherProps
   } = props;

packages/@adobe/react-spectrum/test/numberfield/NumberField.test.js

@@ -1681,10 +1681,8 @@ describe('NumberField', function () {
       expect(label).toHaveAttribute('for', textField.id);
 
       expect(incrementButton).toHaveAttribute('aria-label', 'Increase Width');
-      expect(incrementButton).not.toHaveAttribute('id');
       expect(incrementButton).not.toHaveAttribute('aria-labelledby');
       expect(decrementButton).toHaveAttribute('aria-label', 'Decrease Width');
-      expect(decrementButton).not.toHaveAttribute('id');
       expect(decrementButton).not.toHaveAttribute('aria-labelledby');
     });
 
@@ -1697,10 +1695,8 @@ describe('NumberField', function () {
       expect(textField).toHaveAttribute('aria-label', 'Width');
 
       expect(incrementButton).toHaveAttribute('aria-label', 'Increase Width');
-      expect(incrementButton).not.toHaveAttribute('id');
       expect(incrementButton).not.toHaveAttribute('aria-labelledby');
       expect(decrementButton).toHaveAttribute('aria-label', 'Decrease Width');
-      expect(decrementButton).not.toHaveAttribute('id');
       expect(decrementButton).not.toHaveAttribute('aria-labelledby');
     });
 
@@ -1753,10 +1749,8 @@ describe('NumberField', function () {
       expect(textField).toHaveAttribute('aria-label', 'Width');
 
       expect(incrementButton).toHaveAttribute('aria-label', 'Increment');
-      expect(incrementButton).not.toHaveAttribute('id');
       expect(incrementButton).not.toHaveAttribute('aria-labelledby');
       expect(decrementButton).toHaveAttribute('aria-label', 'Decrease Width');
-      expect(decrementButton).not.toHaveAttribute('id');
       expect(decrementButton).not.toHaveAttribute('aria-labelledby');
     });
 
@@ -1770,10 +1764,8 @@ describe('NumberField', function () {
       expect(textField).toHaveAttribute('aria-label', 'Width');
 
       expect(incrementButton).toHaveAttribute('aria-label', 'Increase Width');
-      expect(incrementButton).not.toHaveAttribute('id');
       expect(incrementButton).not.toHaveAttribute('aria-labelledby');
       expect(decrementButton).toHaveAttribute('aria-label', 'Decrement');
-      expect(decrementButton).not.toHaveAttribute('id');
       expect(decrementButton).not.toHaveAttribute('aria-labelledby');
     });
 

packages/react-aria-components/src/Button.tsx

@@ -10,8 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-import {announce} from 'react-aria/private/live-announcer/LiveAnnouncer';
-
 import {AriaButtonProps, useButton} from 'react-aria/useButton';
 import {
   ClassNameOrFunction,
@@ -28,10 +26,9 @@ import {GlobalDOMAttributes} from '@react-types/shared';
 import {HoverEvents} from '@react-types/shared';
 import {mergeProps} from 'react-aria/mergeProps';
 import {ProgressBarContext} from './ProgressBar';
-import React, {createContext, ForwardedRef, useEffect, useRef} from 'react';
+import React, {createContext, ForwardedRef} from 'react';
 import {useFocusRing} from 'react-aria/useFocusRing';
 import {useHover} from 'react-aria/useHover';
-import {useId} from 'react-aria/useId';
 
 export interface ButtonRenderProps {
   /**
@@ -60,23 +57,23 @@ export interface ButtonRenderProps {
    */
   isDisabled: boolean,
   /**
-   * Whether the button is currently in a pending state.
+   * Whether the button's action is pending.
    * @selector [data-pending]
    */
-  isPending: boolean
+  isPending: boolean,
+  /**
+   * The last error that occurred within the button's action.
+   * @selector [data-action-error]
+   */
+  actionError: unknown | null
 }
 
 export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps, 'button'>, Omit<GlobalDOMAttributes<HTMLButtonElement>, 'onClick'> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-Button'
    */
-  className?: ClassNameOrFunction<ButtonRenderProps>,
-  /**
-   * Whether the button is in a pending state. This disables press and hover events
-   * while retaining focusability, and announces the pending state to screen readers.
-   */
-  isPending?: boolean
+  className?: ClassNameOrFunction<ButtonRenderProps>
 }
 
 interface ButtonContextValue extends ButtonProps {
@@ -91,9 +88,7 @@ export const ButtonContext = createContext<ContextValue<ButtonContextValue, HTML
 export const Button = /*#__PURE__*/ createHideableComponent(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ButtonContext);
   let ctx = props as ButtonContextValue;
-  let {isPending} = ctx;
-  let {buttonProps, isPressed} = useButton(props, ref);
-  buttonProps = useDisableInteractions(buttonProps, isPending);
+  let {buttonProps, progressBarProps, isPressed, isPending, actionError} = useButton(props, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);
   let {hoverProps, isHovered} = useHover({
     ...props,
@@ -105,7 +100,8 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
     isFocused,
     isFocusVisible,
     isDisabled: props.isDisabled || false,
-    isPending: isPending ?? false
+    isPending,
+    actionError
   };
 
   let renderProps = useRenderProps({
@@ -114,70 +110,24 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
     defaultClassName: 'react-aria-Button'
   });
 
-  let buttonId = useId(buttonProps.id);
-  let progressId = useId();
-
-  let ariaLabelledby = buttonProps['aria-labelledby'];
-  if (isPending) {
-    // aria-labelledby wins over aria-label
-    // https://www.w3.org/TR/accname-1.2/#computation-steps
-    if (ariaLabelledby) {
-      ariaLabelledby = `${ariaLabelledby} ${progressId}`;
-    } else if (buttonProps['aria-label']) {
-      ariaLabelledby = `${buttonId} ${progressId}`;
-    }
-  }
-
-  let wasPending = useRef(isPending);
-  useEffect(() => {
-    let message = {'aria-labelledby': ariaLabelledby || buttonId};
-    if (!wasPending.current && isFocused && isPending) {
-      announce(message, 'assertive');
-    } else if (wasPending.current && isFocused && !isPending) {
-      announce(message, 'assertive');
-    }
-    wasPending.current = isPending;
-  }, [isPending, isFocused, ariaLabelledby, buttonId]);
-
   let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.onClick;
 
   return (
     <dom.button
       {...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps)}
-      // When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
-      // We do this by changing the button's type to button.
-      type={buttonProps.type === 'submit' && isPending ? 'button' : buttonProps.type}
-      id={buttonId}
       ref={ref}
-      aria-labelledby={ariaLabelledby}
       slot={props.slot || undefined}
-      aria-disabled={isPending ? 'true' : buttonProps['aria-disabled']}
       data-disabled={props.isDisabled || undefined}
       data-pressed={renderValues.isPressed || undefined}
       data-hovered={isHovered || undefined}
       data-focused={isFocused || undefined}
       data-pending={isPending || undefined}
-      data-focus-visible={isFocusVisible || undefined}>
-      <ProgressBarContext.Provider value={{id: progressId}}>
+      data-focus-visible={isFocusVisible || undefined}
+      data-action-error={actionError || undefined}>
+      <ProgressBarContext.Provider value={progressBarProps}>
         {renderProps.children}
       </ProgressBarContext.Provider>
     </dom.button>
   );
 });
-
-// Events to preserve when isPending is true (for tooltips and other overlays)
-const PRESERVED_EVENT_PATTERN = /Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;
-
-function useDisableInteractions(props, isPending) {
-  if (isPending) {
-    for (const key in props) {
-      if (key.startsWith('on') && !PRESERVED_EVENT_PATTERN.test(key)) {
-        props[key] = undefined;
-      }
-    }
-    props.href = undefined;
-    props.target = undefined;
-  }
-  return props;
-}

packages/react-aria-components/src/ColorField.tsx

@@ -11,7 +11,6 @@
  */
 
 import {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';
-
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -26,13 +25,14 @@ import {
   useSlot
 } from './utils';
 import {ColorChannel, ColorSpace} from 'react-stately/Color';
-import {ColorFieldState, useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';
+import {ColorChannelFieldState, ColorFieldState, useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';
+import {DOMProps, GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types/shared';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
+import {ProgressBarContext} from './ProgressBar';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
 import {TextContext} from './Text';
 import {useLocale} from 'react-aria/I18nProvider';
@@ -63,10 +63,15 @@ export interface ColorFieldRenderProps {
    * @selector [data-channel="hex | hue | saturation | ..."]
    */
   channel: ColorChannel | 'hex',
+  /**
+   * Whether the color field is currently in a pending state.
+   * @selector [data-pending]
+   */
+  isPending: boolean,
   /**
    * State of the color field.
    */
-  state: ColorFieldState
+  state: ColorFieldState | ColorChannelFieldState
 }
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
@@ -121,6 +126,7 @@ function ColorChannelField(props: ColorChannelFieldProps) {
   let {
     labelProps,
     inputProps,
+    progressBarProps,
     descriptionProps,
     errorMessageProps,
     ...validation
@@ -140,6 +146,7 @@ function ColorChannelField(props: ColorChannelFieldProps) {
         inputRef,
         labelProps,
         labelRef,
+        progressBarProps,
         descriptionProps,
         errorMessageProps,
         validation
@@ -166,6 +173,7 @@ function HexColorField(props: HexColorFieldProps) {
   let {
     labelProps,
     inputProps,
+    progressBarProps,
     descriptionProps,
     errorMessageProps,
     ...validation
@@ -183,6 +191,7 @@ function HexColorField(props: HexColorFieldProps) {
     inputRef,
     labelProps,
     labelRef,
+    progressBarProps,
     descriptionProps,
     errorMessageProps,
     validation
@@ -191,12 +200,13 @@ function HexColorField(props: HexColorFieldProps) {
 
 function useChildren(
   props: ColorFieldProps,
-  state: ColorFieldState,
+  state: ColorFieldState | ColorChannelFieldState,
   ref: ForwardedRef<HTMLDivElement>,
   inputProps: InputHTMLAttributes<HTMLElement>,
   inputRef: Ref<HTMLInputElement>,
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   labelRef: Ref<HTMLLabelElement>,
+  progressBarProps: DOMProps,
   descriptionProps: HTMLAttributes<HTMLElement>,
   errorMessageProps: HTMLAttributes<HTMLElement>,
   validation: ValidationResult
@@ -208,6 +218,7 @@ function useChildren(
       channel: props.channel || 'hex',
       isDisabled: props.isDisabled || false,
       isInvalid: validation.isInvalid || false,
+      isPending: state.isPending,
       isReadOnly: props.isReadOnly || false,
       isRequired: props.isRequired || false
     },
@@ -230,7 +241,8 @@ function useChildren(
             errorMessage: errorMessageProps
           }
         }],
-        [FieldErrorContext, validation]
+        [FieldErrorContext, validation],
+        [ProgressBarContext, progressBarProps]
       ]}>
       <dom.div
         {...DOMProps}
@@ -240,6 +252,7 @@ function useChildren(
         data-channel={props.channel || 'hex'}
         data-disabled={props.isDisabled || undefined}
         data-invalid={validation.isInvalid || undefined}
+        data-pending={state.isPending || undefined}
         data-readonly={props.isReadOnly || undefined}
         data-required={props.isRequired || undefined} />
     </Provider>