@react-spectrum/button 3.14.1 → 3.16.0

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 {isAppleDevice, isFirefox, 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';
 
@@ -54,7 +54,7 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   props = useSlotProps(props, 'button');
   props = disablePendingProps(props);
   let {
-    elementType: ElementType = 'button',
+    elementType: Element = 'button',
     children,
     variant,
     style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',
@@ -67,11 +67,20 @@ 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 stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let [isFocused, onFocusChange] = useState(false);
+  let {focusProps} = useFocus({onFocusChange, isDisabled});
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');
   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 iconId = useId();
+  let textId = useId();
+  let spinnerId = useId();
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
@@ -98,17 +107,26 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
     staticColor = 'white';
   }
 
+  const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
+  const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
+
+  let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';
+  if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {
+    ariaLive = 'off';
+  }
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
-      <ElementType
+      <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 ? isPendingAriaLiveLabel : buttonProps['aria-label']}
+        aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}
         className={
           classNames(
             styles,
@@ -126,24 +144,46 @@ 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 && (
+            <div
+              aria-hidden="true"
+              style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
+              className={classNames(styles, 'spectrum-Button-circleLoader')}>
+              <ProgressCircle
+                aria-label={isPendingAriaLiveLabel}
+                isIndeterminate
+                size="S"
+                staticColor={staticColor} />
+            </div>
+          )}
+          {isPending &&
+            <>
+              <div aria-live={isFocused ? ariaLive : 'off'}>
+                {isProgressVisible &&
+                  <div role="img" aria-labelledby={isPendingAriaLiveLabelledby} />
+                }
+              </div>
+              {/* 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 may cause extra announcements in other browsers. */}
+              <div id={spinnerId} role="img" aria-label={isPendingAriaLiveLabel} />
+            </>
+          }
         </SlotProvider>
-      </ElementType>
+      </Element>
     </FocusRing>
   );
 }