Merge b2aa4c3 into ce2c674

primer · Aug 26, 2024 · 9a06f32 · 9a06f32
2 parents ce2c674 + b2aa4c3
commit 9a06f32
Showing 1 changed file with 47 additions and 20 deletions.
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -14,7 +14,7 @@ const shimmer = keyframes`
   to { mask-position: 0%; }
 `
 
-export const Item = styled.span<ProgressProp & SxProp>`
+const ProgressItem = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
   background-color: ${get('colors.success.emphasis')};
 
@@ -31,8 +31,6 @@ export const Item = styled.span<ProgressProp & SxProp>`
   ${sx};
 `
 
-Item.displayName = 'ProgressBar.Item'
-
 const sizeMap = {
   small: '5px',
   large: '10px',
@@ -57,36 +55,65 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   ${sx};
 `
 
-export type ProgressBarProps = React.HTMLAttributes<HTMLSpanElement> & {bg?: string} & StyledProgressContainerProps &
-  ProgressProp
+export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {'aria-label'?: string} & ProgressProp & SxProp
 
-export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
-  (
-    {animated, progress, bg = 'success.emphasis', barSize = 'default', children, ...rest}: ProgressBarProps,
-    forwardRef,
-  ) => {
-    if (children && progress) {
-      throw new Error('You should pass `progress` or children, not both.')
+export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
+  ({progress, 'aria-label': ariaLabel, ...rest}, forwardRef) => {
+    const progressAsNumber = typeof progress === 'string' ? parseInt(progress, 10) : progress
+
+    const ariaAttributes = {
+      'aria-valuenow': progressAsNumber && progressAsNumber >= 0 ? Math.round(progressAsNumber) : undefined,
+      'aria-valuemin': 0,
+      'aria-valuemax': 100,
     }
 
     warning(
-      children &&
+      !ariaAttributes['aria-valuenow'] &&
         typeof (rest as React.AriaAttributes)['aria-valuenow'] === 'undefined' &&
         typeof (rest as React.AriaAttributes)['aria-valuetext'] === 'undefined',
       'Expected `aria-valuenow` or `aria-valuetext` to be provided to <ProgressBar>. Provide one of these values so screen reader users can determine the current progress. This warning will become an error in the next major release.',
     )
 
-    const progressAsNumber = typeof progress === 'string' ? parseInt(progress, 10) : progress
+    return (
+      <ProgressItem
+        role="progressbar"
+        aria-label={ariaLabel}
+        ref={forwardRef}
+        progress={progress}
+        {...ariaAttributes}
+        {...rest}
+      />
+    )
+  },
+)
 
-    const ariaAttributes = {
-      'aria-valuenow': progressAsNumber ? Math.round(progressAsNumber) : undefined,
-      'aria-valuemin': 0,
-      'aria-valuemax': 100,
+Item.displayName = 'ProgressBar.Item'
+
+export type ProgressBarProps = React.HTMLAttributes<HTMLSpanElement> & {bg?: string} & StyledProgressContainerProps &
+  ProgressProp
+
+export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
+  (
+    {
+      animated,
+      progress,
+      bg = 'success.emphasis',
+      barSize = 'default',
+      children,
+      'aria-label': ariaLabel,
+      ...rest
+    }: ProgressBarProps,
+    forwardRef,
+  ) => {
+    if (children && progress) {
+      throw new Error('You should pass `progress` or children, not both.')
     }
 
     return (
-      <ProgressContainer ref={forwardRef} role="progressbar" barSize={barSize} {...ariaAttributes} {...rest}>
-        {children ?? <Item data-animated={animated} progress={progress} sx={{backgroundColor: bg}} />}
+      <ProgressContainer ref={forwardRef} barSize={barSize} {...rest}>
+        {children ?? (
+          <Item data-animated={animated} progress={progress} aria-label={ariaLabel} sx={{backgroundColor: bg}} />
+        )}
       </ProgressContainer>
     )
   },