Wrap pending in button (#5595)

Remove pass through for aria-hidden on progress. Wrap progress in a hidden div for pending
adobe · Dec 18, 2023 · 3900ead · 3900ead · rspbot · Dec 19, 2023
1 parent e6e7905
commit 3900ead
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/packages/@adobe/spectrum-css-temp/components/button/index.css b/packages/@adobe/spectrum-css-temp/components/button/index.css
@@ -161,6 +161,8 @@ governing permissions and limitations under the License.
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
   }
 
   &.spectrum-Button--pending {

diff --git a/packages/@react-aria/progress/src/useProgressBar.ts b/packages/@react-aria/progress/src/useProgressBar.ts
@@ -23,8 +23,6 @@ export interface ProgressBarAria {
   labelProps: DOMAttributes
 }
 
-const allowedAttributes = new Set(['aria-hidden']);
-
 /**
  * Provides the accessibility implementation for a progress bar component.
  * Progress bars show either determinate or indeterminate progress of an operation
@@ -42,7 +40,7 @@ export function useProgressBar(props: AriaProgressBarProps): ProgressBarAria {
     }
   } = props;
 
-  let domProps = filterDOMProps(props, {labelable: true, propNames: allowedAttributes});
+  let domProps = filterDOMProps(props, {labelable: true});
   let {labelProps, fieldProps} = useLabel({
     ...props,
     // Progress bar is not an HTML input element so it

diff --git a/packages/@react-spectrum/button/src/Button.tsx b/packages/@react-spectrum/button/src/Button.tsx
@@ -156,15 +156,18 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
           {typeof children === 'string'
             ? <Text>{children}</Text>
             : children}
-          {isPending && <ProgressCircle
-            aria-hidden="true"
-            aria-label={isPendingAriaLiveLabel}
-            isIndeterminate
-            size="S"
-            UNSAFE_className={classNames(styles, 'spectrum-Button-circleLoader')}
-            UNSAFE_style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
-            staticColor={staticColor} />
-          }
+          {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'}>

diff --git a/packages/@react-spectrum/progress/test/ProgressCircle.test.js b/packages/@react-spectrum/progress/test/ProgressCircle.test.js
@@ -160,11 +160,4 @@ describe('ProgressCircle', function () {
     let progressBar = getByTestId('test');
     expect(progressBar).toBeInTheDocument();
   });
-
-  it('supports aria-hidden', function () {
-    let {getByRole} = render(<ProgressCircle value={25} aria-label="Progress" aria-hidden="true" />);
-    let progressBar = getByRole('progressbar', {hidden: true});
-    expect(progressBar).toBeInTheDocument();
-    expect(progressBar).toHaveAttribute('aria-hidden', 'true');
-  });
 });