Append "pending" to button label and copy to isPending spinner aria-label (#5245)

Announce pending to screen readers.

Author: iamwillpowell

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -156,13 +156,14 @@ governing permissions and limitations under the License.
     padding: var(--spectrum-global-dimension-size-65);
   }
 
+  .spectrum-Button-circleLoader {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   &.spectrum-Button--pending {
-    .spectrum-Button-circleLoader {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
 
     .spectrum-Button-label,
     .spectrum-Icon {

packages/@react-aria/progress/src/useProgressBar.ts

@@ -23,6 +23,8 @@ 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
@@ -40,7 +42,7 @@ export function useProgressBar(props: AriaProgressBarProps): ProgressBarAria {
     }
   } = props;
 
-  let domProps = filterDOMProps(props, {labelable: true});
+  let domProps = filterDOMProps(props, {labelable: true, propNames: allowedAttributes});
   let {labelProps, fieldProps} = useLabel({
     ...props,
     // Progress bar is not an HTML input element so it

packages/@react-spectrum/button/intl/ar-AE.json

@@ -1,3 +1,3 @@
 {
-  "loading": "Loading…"
+  "pending": "pending"
 }