From f53fafbfb16496f1dd5b1a50d620b215d02ddcba Mon Sep 17 00:00:00 2001
From: Diana Suvorova <diana.suvorova@uber.com>
Date: Thu, 2 Apr 2026 18:18:48 -0700
Subject: [PATCH 1/2] Progress Bar: adding intent prop and ally updates

---
 .../examples/progress-bar/intent.tsx          | 18 +++++
 .../examples/progress-bar/steps.tsx           |  4 +-
 .../pages/components/progress-bar.mdx         |  9 ++-
 .../__tests__/progress-bar.stories.tsx        |  2 +
 .../__tests__/progressbar-intent.scenario.tsx | 54 +++++++++++++++
 .../__tests__/progressbar-rounded.test.tsx    | 28 +++++++-
 .../__tests__/progressbar.test.tsx            | 19 ++++++
 src/progress-bar/constants.ts                 |  8 +++
 src/progress-bar/index.ts                     |  2 +-
 src/progress-bar/progressbar-rounded.tsx      | 14 ++--
 src/progress-bar/progressbar.tsx              | 33 +++++-----
 src/progress-bar/styled-components.tsx        | 65 ++++++++++++++-----
 src/progress-bar/types.ts                     | 16 ++++-
 13 files changed, 229 insertions(+), 43 deletions(-)
 create mode 100644 documentation-site/examples/progress-bar/intent.tsx
 create mode 100644 src/progress-bar/__tests__/progressbar-intent.scenario.tsx

diff --git a/documentation-site/examples/progress-bar/intent.tsx b/documentation-site/examples/progress-bar/intent.tsx
new file mode 100644
index 0000000000..7a9ba38821
--- /dev/null
+++ b/documentation-site/examples/progress-bar/intent.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { ProgressBar, INTENT } from "baseui/progress-bar";
+
+export default function Example() {
+  return (
+    <>
+      <ProgressBar value={50} showLabel intent={INTENT.positive} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.warning} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.negative} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.brand} />
+      <br />
+      <ProgressBar infinite showLabel intent={INTENT.positive} />
+    </>
+  );
+}
diff --git a/documentation-site/examples/progress-bar/steps.tsx b/documentation-site/examples/progress-bar/steps.tsx
index 4563fb3dcf..353d01dc2e 100644
--- a/documentation-site/examples/progress-bar/steps.tsx
+++ b/documentation-site/examples/progress-bar/steps.tsx
@@ -9,7 +9,9 @@ export default function Example() {
   return (
     <div>
       <ProgressBar value={value} steps={5} />
-      <div style={{ display: "flex", justifyContent: "center" }}>
+      <div
+        style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}
+      >
         <Button
           onClick={() => setValue((prevValue) => prevValue - stepSize)}
           size={SIZE.compact}
diff --git a/documentation-site/pages/components/progress-bar.mdx b/documentation-site/pages/components/progress-bar.mdx
index dd4fcaeb8e..accc86a057 100644
--- a/documentation-site/pages/components/progress-bar.mdx
+++ b/documentation-site/pages/components/progress-bar.mdx
@@ -8,6 +8,7 @@ import WithLabel from "examples/progress-bar/with-label.tsx";
 import CustomLabel from "examples/progress-bar/custom-label.tsx";
 import Customization from "examples/progress-bar/overrides.tsx";
 import Steps from "examples/progress-bar/steps.tsx";
+import Intent from "examples/progress-bar/intent.tsx";
 import ProgressBarRounded from "examples/progress-bar/rounded.tsx";
 
 import { ProgressBar } from "baseui/progress-bar";
@@ -26,11 +27,13 @@ Indicates a wait time for actions - either within an experience flow or loading
 
 ## Accessibility
 
-- The progress bar always sets `role="progressbar"`
+- The progress bar always sets `role="progressbar"` and `aria-live="polite"`
 - When `infinite` is `false` (the progress bar is determinate), these determinate aria tags are set:
   - `aria-valuenow={value}`
   - `aria-valuemin={0}`
   - `aria-valuemax={100}`
+- When `infinite` is `true`, `aria-busy="true"` is set
+- Use `ariaLabel` or `aria-label` prop to provide a descriptive label for screen readers
 
 ## Examples
 
@@ -45,6 +48,10 @@ Indicates a wait time for actions - either within an experience flow or loading
   <Negative />
 </Example>
 
+<Example title="Progress bar with Intent" path="progress-bar/intent.tsx">
+  <Intent />
+</Example>
+
 <Example
   title="Progress bar with Visible Label"
   path="progress-bar/with-label.tsx"
diff --git a/src/progress-bar/__tests__/progress-bar.stories.tsx b/src/progress-bar/__tests__/progress-bar.stories.tsx
index 71b443f4e7..fbbd05a543 100644
--- a/src/progress-bar/__tests__/progress-bar.stories.tsx
+++ b/src/progress-bar/__tests__/progress-bar.stories.tsx
@@ -5,12 +5,14 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import React from 'react';
+import { Scenario as ProgressbarIntentScenario } from './progressbar-intent.scenario';
 import { Scenario as ProgressbarNegativeScenario } from './progressbar-negative.scenario';
 import { Scenario as ProgressbarRoundedAnimatedScenario } from './progressbar-rounded-animated.scenario';
 import { Scenario as ProgressbarRoundedOverridesScenario } from './progressbar-rounded-overrides.scenario';
 import { Scenario as ProgressbarRoundedScenario } from './progressbar-rounded.scenario';
 import { Scenario as ProgressbarScenario } from './progressbar.scenario';
 
+export const ProgressbarIntent = () => <ProgressbarIntentScenario />;
 export const ProgressbarNegative = () => <ProgressbarNegativeScenario />;
 export const ProgressbarRoundedAnimated = () => <ProgressbarRoundedAnimatedScenario />;
 
diff --git a/src/progress-bar/__tests__/progressbar-intent.scenario.tsx b/src/progress-bar/__tests__/progressbar-intent.scenario.tsx
new file mode 100644
index 0000000000..91d6149c11
--- /dev/null
+++ b/src/progress-bar/__tests__/progressbar-intent.scenario.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+
+import { ProgressBar, SIZE, INTENT } from '..';
+
+export function Scenario() {
+  return (
+    <>
+      <h3>Determinate - All Intents</h3>
+      <ProgressBar value={50} showLabel intent={INTENT.default} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.positive} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.warning} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.negative} />
+      <br />
+      <ProgressBar value={50} showLabel intent={INTENT.brand} />
+      <br />
+
+      <h3>Indeterminate - All Intents</h3>
+      <ProgressBar infinite showLabel intent={INTENT.default} />
+      <br />
+      <ProgressBar infinite showLabel intent={INTENT.positive} />
+      <br />
+      <ProgressBar infinite showLabel intent={INTENT.warning} />
+      <br />
+      <ProgressBar infinite showLabel intent={INTENT.negative} />
+      <br />
+      <ProgressBar infinite showLabel intent={INTENT.brand} />
+      <br />
+
+      <h3>Different Sizes with Intent</h3>
+      <ProgressBar value={60} showLabel size={SIZE.small} intent={INTENT.positive} />
+      <br />
+      <ProgressBar value={60} showLabel size={SIZE.medium} intent={INTENT.warning} />
+      <br />
+      <ProgressBar value={60} showLabel size={SIZE.large} intent={INTENT.negative} />
+      <br />
+
+      <h3>Segmented with Intent</h3>
+      <ProgressBar value={60} showLabel steps={5} intent={INTENT.positive} />
+      <br />
+      <ProgressBar value={60} showLabel steps={5} intent={INTENT.warning} />
+      <br />
+      <ProgressBar value={60} showLabel steps={5} intent={INTENT.negative} />
+    </>
+  );
+}
diff --git a/src/progress-bar/__tests__/progressbar-rounded.test.tsx b/src/progress-bar/__tests__/progressbar-rounded.test.tsx
index 5c7172c1d7..075f042c09 100644
--- a/src/progress-bar/__tests__/progressbar-rounded.test.tsx
+++ b/src/progress-bar/__tests__/progressbar-rounded.test.tsx
@@ -21,9 +21,35 @@ describe('Rounded progress bar', function () {
     getByText(container, '50%');
   });
 
-  it('should render component and set a correct aria-valuenow value (rounded and formatted)', async () => {
+  it('should render component and set a correct aria-valuenow value (numeric)', async () => {
     const { container } = render(<ProgressBarRounded progress={0.5} size={SIZE.medium} />);
     const progressBar = getByRole(container, 'progressbar');
     expect(progressBar).toHaveAttribute('aria-valuenow', '0.5');
   });
+
+  it('should have aria-live attribute for accessibility', () => {
+    const { container } = render(<ProgressBarRounded progress={0.5} />);
+    const progressBar = getByRole(container, 'progressbar');
+    expect(progressBar).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('should have default aria-label with percentage', () => {
+    const { container } = render(<ProgressBarRounded progress={0.75} />);
+    const progressBar = getByRole(container, 'progressbar', { name: '75% complete' });
+    expect(progressBar).toBeInTheDocument();
+  });
+
+  it('should accept custom aria-label prop', () => {
+    const { container } = render(<ProgressBarRounded progress={0.5} ariaLabel="Uploading file" />);
+    const progressBar = getByRole(container, 'progressbar', { name: 'Uploading file' });
+    expect(progressBar).toBeInTheDocument();
+  });
+
+  it('should accept custom aria-label via kebab-case prop', () => {
+    const { container } = render(
+      <ProgressBarRounded progress={0.5} aria-label="Processing data" />
+    );
+    const progressBar = getByRole(container, 'progressbar', { name: 'Processing data' });
+    expect(progressBar).toBeInTheDocument();
+  });
 });
diff --git a/src/progress-bar/__tests__/progressbar.test.tsx b/src/progress-bar/__tests__/progressbar.test.tsx
index 62ed28a820..d63ed25e18 100644
--- a/src/progress-bar/__tests__/progressbar.test.tsx
+++ b/src/progress-bar/__tests__/progressbar.test.tsx
@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { render, getByRole, getByText } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { ProgressBar } from '..';
 
@@ -37,4 +38,22 @@ describe('Stateless progress bar', function () {
     const { container } = render(<ProgressBar aria-label="test" steps={2} />);
     getByRole(container, 'progressbar', { name: 'test' });
   });
+
+  it('should have aria-live attribute for accessibility', () => {
+    const { container } = render(<ProgressBar value={75} />);
+    const progressBar = getByRole(container, 'progressbar');
+    expect(progressBar).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('should have aria-busy true for infinite progress bar', () => {
+    const { container } = render(<ProgressBar infinite />);
+    const progressBar = getByRole(container, 'progressbar');
+    expect(progressBar).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('should not have aria-busy for determinate progress bar', () => {
+    const { container } = render(<ProgressBar value={75} />);
+    const progressBar = getByRole(container, 'progressbar');
+    expect(progressBar).not.toHaveAttribute('aria-busy');
+  });
 });
diff --git a/src/progress-bar/constants.ts b/src/progress-bar/constants.ts
index f3864ec35a..58546ebb0f 100644
--- a/src/progress-bar/constants.ts
+++ b/src/progress-bar/constants.ts
@@ -9,3 +9,11 @@ export const SIZE = {
   medium: 'medium',
   large: 'large',
 } as const;
+
+export const INTENT = {
+  default: 'default',
+  positive: 'positive',
+  warning: 'warning',
+  negative: 'negative',
+  brand: 'brand',
+} as const;
diff --git a/src/progress-bar/index.ts b/src/progress-bar/index.ts
index 7be358f000..adc5035096 100644
--- a/src/progress-bar/index.ts
+++ b/src/progress-bar/index.ts
@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as ProgressBar } from './progressbar';
 export { default as ProgressBarRounded } from './progressbar-rounded';
-export { SIZE } from './constants';
+export { SIZE, INTENT } from './constants';
 // Styled elements
 export {
   StyledRoot,
diff --git a/src/progress-bar/progressbar-rounded.tsx b/src/progress-bar/progressbar-rounded.tsx
index 4e0eb3d1e6..bebac93525 100644
--- a/src/progress-bar/progressbar-rounded.tsx
+++ b/src/progress-bar/progressbar-rounded.tsx
@@ -42,6 +42,7 @@ function ProgressBarRounded({
   animate = true,
   inline = false,
   overrides = {},
+  ariaLabel,
   ...restProps
 }: ProgressBarRoundedProps) {
   const {
@@ -97,13 +98,19 @@ function ProgressBarRounded({
     loop();
   }, [progress]); // We want *only* `progress` to trigger this effect
 
+  const propsAriaLabel = restProps['aria-label'] || ariaLabel;
+  const progressPercentage = `${roundTo(Math.min(progress * 100, 100))}%`;
+  const defaultAriaLabel = propsAriaLabel || `${progressPercentage} complete`;
+
   return (
     <Root
       data-baseweb="progressbar-rounded"
       role="progressbar"
-      aria-valuenow={progress.toFixed(2).replace(/\.?0+$/, '')}
+      aria-label={defaultAriaLabel}
+      aria-valuenow={progress}
       aria-valuemin={0}
       aria-valuemax={1}
+      aria-live="polite"
       $size={size}
       $inline={inline}
       {...restProps}
@@ -122,9 +129,8 @@ function ProgressBarRounded({
         />
       </Svg>
 
-      <Text $size={size} {...textProps}>
-        {roundTo(Math.min(progress * 100, 100))}%
-      </Text>
+      {/* eslint-disable-next-line react/no-children-prop */}
+      <Text $size={size} children={progressPercentage} {...textProps} />
     </Root>
   );
 }
diff --git a/src/progress-bar/progressbar.tsx b/src/progress-bar/progressbar.tsx
index c869462fb9..fcc2279ab8 100644
--- a/src/progress-bar/progressbar.tsx
+++ b/src/progress-bar/progressbar.tsx
@@ -38,15 +38,6 @@ class ProgressBar extends React.Component<
     value: 0,
   };
 
-  componentDidMount() {
-    // TODO(v11): remove warning when switching default Spinner
-    if (__DEV__) {
-      if (this.props.errorMessage) {
-        console.warn('baseui:ProgressBar The `errorMessage` prop is deprecated in WAI-ARIA v1.2.');
-      }
-    }
-  }
-
   render() {
     const {
       overrides = {},
@@ -59,7 +50,8 @@ class ProgressBar extends React.Component<
       maxValue,
       showLabel,
       infinite,
-      errorMessage,
+      intent,
+      errorMessage, // Deprecated, ignored
       forwardedRef,
       ...restProps
     } = this.props;
@@ -85,6 +77,7 @@ class ProgressBar extends React.Component<
     const [InfiniteBar, infiniteBarProps] = getOverrides(overrides.InfiniteBar, StyledInfiniteBar);
     const sharedProps = {
       $infinite: infinite,
+      $intent: intent,
       $size: size,
       $steps: steps,
       $successValue: maximumValue,
@@ -113,8 +106,6 @@ class ProgressBar extends React.Component<
       return `Step ${Math.ceil(((value - minValue) / (maxValue - minValue)) * steps)} of ${steps}`;
     }
     return (
-      /* eslint-disable jsx-a11y/role-supports-aria-props */
-
       <Root
         ref={forwardedRef}
         data-baseweb="progress-bar"
@@ -123,8 +114,8 @@ class ProgressBar extends React.Component<
         aria-valuenow={infinite ? null : value}
         aria-valuemin={infinite ? null : minValue}
         aria-valuemax={infinite ? null : maximumValue}
-        aria-invalid={errorMessage ? true : null}
-        aria-errormessage={errorMessage}
+        aria-live="polite"
+        aria-busy={infinite ? true : null}
         {...restProps}
         {...sharedProps}
         {...rootProps}
@@ -132,9 +123,18 @@ class ProgressBar extends React.Component<
         <BarContainer {...sharedProps} {...barContainerProps}>
           {infinite ? (
             <React.Fragment>
-              <InfiniteBar $isLeft={true} $size={sharedProps.$size} {...infiniteBarProps} />
+              <InfiniteBar
+                $isLeft={true}
+                $size={sharedProps.$size}
+                $intent={sharedProps.$intent}
+                {...infiniteBarProps}
+              />
 
-              <InfiniteBar $size={sharedProps.$size} {...infiniteBarProps} />
+              <InfiniteBar
+                $size={sharedProps.$size}
+                $intent={sharedProps.$intent}
+                {...infiniteBarProps}
+              />
             </React.Fragment>
           ) : (
             renderProgressBar()
@@ -147,7 +147,6 @@ class ProgressBar extends React.Component<
         )}
       </Root>
     );
-    /* eslint-enable jsx-a11y/role-supports-aria-props */
   }
 }
 
diff --git a/src/progress-bar/styled-components.tsx b/src/progress-bar/styled-components.tsx
index 7022b81c8b..350c0c9631 100644
--- a/src/progress-bar/styled-components.tsx
+++ b/src/progress-bar/styled-components.tsx
@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled, hexToRgb, withWrapper } from '../styles';
-import { SIZE } from './constants';
+import { SIZE, INTENT } from './constants';
 
 import type { StyleProps, Size } from './types';
 import React from 'react';
@@ -21,24 +21,38 @@ function getBarHeight(size) {
   }[size];
 }
 
+function getProgressColor(colors, intent) {
+  // When intent is not provided, use the old default color for backward compatibility
+  if (!intent) {
+    return colors.backgroundAccent;
+  }
+
+  return {
+    [INTENT.default]: colors.contentAccent,
+    [INTENT.positive]: colors.contentPositive,
+    [INTENT.warning]: colors.contentWarning,
+    [INTENT.negative]: colors.contentNegative,
+    [INTENT.brand]: colors.brandBorderAccessible,
+  }[intent];
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledRoot = styled<'div', StyleProps>('div', (props) => {
+  const { $theme } = props;
   return {
     width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale300,
   };
 });
 
 StyledRoot.displayName = 'StyledRoot';
 
-export const StyledBarContainer = styled<'div', StyleProps>('div', (props) => {
-  const { $theme } = props;
-  const { sizing } = $theme;
+export const StyledBarContainer = styled<'div', StyleProps>('div', () => {
   return {
     display: 'flex',
-    marginLeft: sizing.scale500,
-    marginRight: sizing.scale500,
-    marginTop: sizing.scale500,
-    marginBottom: sizing.scale500,
+    position: 'relative',
   };
 });
 
@@ -79,7 +93,16 @@ export const StyledBar = styled<
 StyledBar.displayName = 'StyledBar';
 
 export const StyledBarProgress = styled<'div', StyleProps>('div', (props) => {
-  const { $theme, $value, $successValue, $steps, $index, $maxValue, $minValue = 0 } = props;
+  const {
+    $theme,
+    $value,
+    $successValue,
+    $steps,
+    $index,
+    $maxValue,
+    $minValue = 0,
+    $intent,
+  } = props;
   // making sure this doesn't break existing use that use StyledBarProgress directly
   const maxValue = $maxValue ? $maxValue : $successValue;
   const { colors, sizing, borders } = $theme;
@@ -142,7 +165,7 @@ export const StyledBarProgress = styled<'div', StyleProps>('div', (props) => {
     borderTopRightRadius: borderRadius,
     borderBottomRightRadius: borderRadius,
     borderBottomLeftRadius: borderRadius,
-    backgroundColor: colors.backgroundAccent,
+    backgroundColor: getProgressColor(colors, $intent),
     height: '100%',
     width: '100%',
     transform: 'translateX(-102%)',
@@ -157,13 +180,15 @@ export const StyledInfiniteBar = styled<
   'div',
   {
     $isLeft?: boolean;
+    $intent?: StyleProps['$intent'];
     $size: Size;
   }
 >('div', (props) => {
-  const { $theme, $isLeft = false, $size = SIZE.medium } = props;
+  const { $theme, $isLeft = false, $size = SIZE.medium, $intent } = props;
   const { colors, sizing, borders } = $theme;
   const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
   const height = getBarHeight($size);
+  const progressColor = getProgressColor(colors, $intent);
   const animationStyles = {
     display: 'inline-block',
     flex: 1,
@@ -176,9 +201,9 @@ export const StyledInfiniteBar = styled<
     backgroundSize: '300% auto',
     backgroundRepeat: 'no-repeat',
     backgroundPositionX: $isLeft ? '-50%' : '150%',
-    backgroundImage: `linear-gradient(${$isLeft ? '90' : '270'}deg, transparent 0%, ${
-      colors.backgroundAccent
-    } 25%, ${colors.backgroundAccent} 75%, transparent 100%)`,
+    backgroundImage: `linear-gradient(${
+      $isLeft ? '90' : '270'
+    }deg, transparent 0%, ${progressColor} 25%, ${progressColor} 75%, transparent 100%)`,
     animationName: $isLeft
       ? {
           '0%': {
@@ -227,10 +252,18 @@ export const StyledInfiniteBar = styled<
 StyledInfiniteBar.displayName = 'StyledInfiniteBar';
 
 export const StyledLabel = styled<'div', StyleProps>('div', (props) => {
+  const { $theme, $size } = props;
+  const typographyMap = {
+    [SIZE.small]: $theme.typography.LabelSmall,
+    [SIZE.medium]: $theme.typography.LabelMedium,
+    [SIZE.large]: $theme.typography.LabelLarge,
+  };
   return {
     textAlign: 'center',
-    ...props.$theme.typography.font150,
-    color: props.$theme.colors.contentTertiary,
+    paddingLeft: $theme.sizing.scale600,
+    paddingRight: $theme.sizing.scale600,
+    ...typographyMap[$size],
+    color: $theme.colors.contentPrimary,
   };
 });
 
diff --git a/src/progress-bar/types.ts b/src/progress-bar/types.ts
index d1c2468b49..0ecb651e5f 100644
--- a/src/progress-bar/types.ts
+++ b/src/progress-bar/types.ts
@@ -6,9 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { SIZE } from './constants';
+import type { SIZE, INTENT } from './constants';
 
 export type Size = keyof typeof SIZE;
+export type Intent = keyof typeof INTENT;
 
 export type ProgressBarOverrides = {
   Root?: Override;
@@ -24,12 +25,19 @@ export type ProgressBarProps = {
   ariaLabel?: string;
   'aria-label'?: string;
   children?: React.ReactNode;
-  /** Error message for screen-reader users**/
+  /**
+   * @deprecated This prop is deprecated and will be removed in a future version.
+   * Use proper error UI patterns instead (Banner, Alert, Toast) as aria-invalid and aria-errormessage
+   * are not semantically correct for progress bars per WAI-ARIA 1.2.
+   * This prop is ignored and has no effect.
+   */
   errorMessage?: string;
   /** The function that returns a progress bar label to display. */
   getProgressLabel: (value: number, maxValue: number, minValue: number) => React.ReactNode;
   /** If set to true, there’s and infinite loading animation. */
   infinite: boolean;
+  /** The visual intent/variant of the progress bar. */
+  intent?: Intent;
   overrides?: ProgressBarOverrides;
   /** If set to false, label is hidden and `getProgressLabel` is ignored. */
   showLabel: boolean;
@@ -50,6 +58,7 @@ export type ProgressBarProps = {
 export type StyleProps = {
   $infinite: boolean;
   $index: number;
+  $intent?: Intent;
   $size: Size;
   $steps: number;
   $successValue: number;
@@ -75,6 +84,9 @@ export type ProgressBarRoundedProps = {
   animate?: boolean;
   /** Toggle container rendering as a block or inline. */
   inline?: boolean;
+  /** The accessible label for the progress bar. Defaults to percentage if not provided. */
+  ariaLabel?: string;
+  'aria-label'?: string;
   /** Overrides for sub-nodes in the rendering tree. */
   overrides?: ProgressBarRoundedOverrides;
 };

From ea70d67a588d42d05eb9fa63484c3f25de3b24d1 Mon Sep 17 00:00:00 2001
From: Diana Suvorova <diana.suvorova@uber.com>
Date: Thu, 2 Apr 2026 19:16:57 -0700
Subject: [PATCH 2/2] minor release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3bf45edcc9..3fe448aa82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "16.1.1",
+  "version": "16.2.1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",