@react-spectrum/button 3.0.0-nightly.2594 → 3.0.0-nightly.2602

package/src/Button.tsx

@@ -22,14 +22,14 @@ import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useId} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
 import React, {ElementType, ReactElement, useEffect, useState} from 'react';
 import {SpectrumButtonProps} from '@react-types/button';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {Text} from '@react-spectrum/text';
 import {useButton} from '@react-aria/button';
-import {useHover} from '@react-aria/interactions';
+import {useFocus, useHover} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
@@ -67,11 +67,21 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   let domRef = useFocusableRef(ref);
   let {buttonProps, isPressed} = useButton(props, domRef);
   let {hoverProps, isHovered} = useHover({isDisabled});
+  let [isFocused, onFocusChange] = useState(false);
+  let {focusProps} = useFocus({onFocusChange, isDisabled});
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {styleProps} = useStyleProps(otherProps);
   let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);
   let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);
+  // an aria label will block children and their labels from being read, this is undesirable for pending state
+  let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
   let [isProgressVisible, setIsProgressVisible] = useState(false);
+  let backupButtonId = useId();
+  let buttonId = buttonProps.id || backupButtonId;
+  let spinnerId = useId();
+  let textId = useId();
+  let iconId = useId();
+  let auxLabelId = useId();
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
@@ -102,13 +112,16 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
       <Element
         {...styleProps}
-        {...mergeProps(buttonProps, hoverProps)}
+        {...mergeProps(buttonProps, hoverProps, focusProps)}
+        id={buttonId}
         ref={domRef}
         data-variant={variant}
         data-style={style}
         data-static-color={staticColor || undefined}
-        aria-disabled={isPending || undefined}
-        aria-live={isPending ? 'polite' : undefined}
+        aria-disabled={isPending ? 'true' : undefined}
+        aria-label={isPending ? undefined : buttonProps['aria-label']}
+        aria-labelledby={isPending ? undefined : buttonProps['aria-labelledby']}
+        aria-live={isPending && isFocused ? 'polite' : undefined}
         className={
           classNames(
             styles,
@@ -126,22 +139,38 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
         <SlotProvider
           slots={{
             icon: {
+              id: iconId,
               size: 'S',
               UNSAFE_className: classNames(styles, 'spectrum-Icon')
             },
             text: {
+              id: textId,
               UNSAFE_className: classNames(styles, 'spectrum-Button-label')
             }
           }}>
-          {isProgressVisible && <ProgressCircle
-            aria-label={stringFormatter.format('loading')}
-            isIndeterminate
-            size="S"
-            UNSAFE_className={classNames(styles, 'spectrum-Button-circleLoader')}
-            staticColor={staticColor} />}
           {typeof children === 'string'
             ? <Text>{children}</Text>
             : children}
+          {isPending && <ProgressCircle
+            aria-hidden="true"
+            isIndeterminate
+            size="S"
+            UNSAFE_className={classNames(styles, 'spectrum-Button-circleLoader')}
+            UNSAFE_style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
+            staticColor={staticColor} />
+          }
+          {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.
+           Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button
+           https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari
+           The aria-live does cause extra announcements in other browsers. */}
+          {isPending && hasAriaLabel &&
+            <div aria-hidden="true" id={auxLabelId} aria-label={buttonProps['aria-label']} aria-labelledby={buttonProps['aria-labelledby']?.replace(buttonId, auxLabelId)} />
+          }
+          {isPending && <div
+            id={spinnerId}
+            aria-label={stringFormatter.format('pending')}
+            aria-labelledby={`${hasAriaLabel ? '' : iconId} ${hasAriaLabel ? auxLabelId : textId} ${spinnerId}`} />
+          }
         </SlotProvider>
       </Element>
     </FocusRing>