[circularprogress][linearprogress] Improve accessibility by silviuaavram · Pull Request #48172 · mui/material-ui

silviuaavram · 2026-04-01T15:02:59Z

I have followed (at least) the PR section of the contributing guide.

Closes #48179

LinearProgress

add min and max props
add non-production checks for when value and bufferValue is not between the min and max values
add non-production checks for passing min and max with indeterminate / query variants
safeguard against calculating style when min >= max
change label docs example to include both label and value label
add docs example to illustrate aria-valuetext
docs example for missing query variant.

CircularProgress

add min and max props
non-production check for value when not in bounds
add non-production checks for passing min and max with indeterminate / query variants
safeguard against calculating style when min >= max
docs example to illustrate custom scales (min and max usage)

mui-bot · 2026-04-01T15:04:06Z

Netlify deploy preview

docs/data/material/components/progress/progress.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+157B^(+0.03%)	🔺+74B^(+0.05%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against ac8c332

Copilot

Pull request overview

Improves accessibility and flexibility of LinearProgress and CircularProgress by introducing configurable value ranges (minValue/maxValue), adding dev-time range validation, and updating documentation/examples to better demonstrate accessible labeling patterns.

Changes:

Add minValue/maxValue props to Linear/Circular progress and update determinate/buffer calculations to use the custom range.
Add/extend tests for RTL determinate behavior and custom range + dev warnings.
Update docs and API descriptions with new demos (custom scale, aria-valuetext, query variant) and revised labeling example.

Reviewed changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
packages/mui-material/src/LinearProgress/LinearProgress.js	Implements `minValue`/`maxValue` handling and dev warnings for LinearProgress.
packages/mui-material/src/LinearProgress/LinearProgress.d.ts	Adds TS typings for `minValue`/`maxValue`.
packages/mui-material/src/LinearProgress/LinearProgress.test.js	Adds RTL determinate coverage and custom range/warning tests.
packages/mui-material/src/CircularProgress/CircularProgress.js	Implements `minValue`/`maxValue` handling and dev warnings for CircularProgress determinate.
packages/mui-material/src/CircularProgress/CircularProgress.d.ts	Adds TS typings for `minValue`/`maxValue`.
packages/mui-material/src/CircularProgress/CircularProgress.test.js	Adds custom range and warning tests for CircularProgress.
docs/translations/api-docs/linear-progress/linear-progress.json	Documents new props in generated API translations.
docs/translations/api-docs/circular-progress/circular-progress.json	Documents new props in generated API translations.
docs/pages/material-ui/api/linear-progress.json	Adds `minValue`/`maxValue` to API page JSON.
docs/pages/material-ui/api/circular-progress.json	Adds `minValue`/`maxValue` to API page JSON.
docs/data/material/components/progress/progress.md	Adds new demos/sections (custom scale, query, `aria-valuetext`) and updates headings/text.
docs/data/material/components/progress/LinearWithValueLabel.tsx	Updates the “with label” demo to use `aria-labelledby` + visible label and value label.
docs/data/material/components/progress/LinearWithValueLabel.js	JS version of the updated “with label” demo.
docs/data/material/components/progress/LinearWithValueLabel.tsx.preview	Updates preview snippet to new component name.
docs/data/material/components/progress/LinearWithAriaValueText.tsx	New demo showing `aria-valuetext` for non-percentage scales.
docs/data/material/components/progress/LinearWithAriaValueText.js	JS version of the new `aria-valuetext` demo.
docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview	Preview snippet for the new `aria-valuetext` demo.
docs/data/material/components/progress/LinearQuery.tsx	New demo for `variant="query"`.
docs/data/material/components/progress/LinearQuery.js	JS version of the new query demo.
docs/data/material/components/progress/LinearQuery.tsx.preview	Preview snippet for the new query demo.
docs/data/material/components/progress/CircularCustomScale.tsx	New demo showing custom scale usage for CircularProgress.
docs/data/material/components/progress/CircularCustomScale.js	JS version of the custom scale demo.
docs/data/material/components/progress/CircularCustomScale.tsx.preview	Preview snippet for the custom scale demo.
docs/data/material/components/progress/CircularWithValueLabel.js	Updates wording to reference `minValue`/`maxValue`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/mui-material/src/CircularProgress/CircularProgress.js

docs/data/material/components/progress/progress.md

packages/mui-material/src/CircularProgress/CircularProgress.js

docs/translations/api-docs/linear-progress/linear-progress.json

docs/translations/api-docs/circular-progress/circular-progress.json

docs/data/material/components/progress/progress.md

docs/data/material/components/progress/LinearWithAriaValueText.tsx

docs/data/material/components/progress/LinearWithAriaValueText.js

packages/mui-material/src/LinearProgress/LinearProgress.js

mj12albert · 2026-04-04T16:12:21Z

packages/mui-material/src/LinearProgress/LinearProgress.js

+      rootProps['aria-valuemin'] = minValue;
+      rootProps['aria-valuemax'] = maxValue;
+      let transform = ((value - minValue) / (maxValue - minValue)) * 100 - 100;
      if (isRtl) {


Technically a user could pass in identical max and min, causing division by 0, we could add another dev warning when min >= max, e.g. https://github.com/mui/base-ui/blob/d15bc0a4fb82f56f08c16d50cd6a4acc3c5247e5/packages/react/src/slider/root/SliderRoot.tsx#L270-L274

and then no need to handle it here

docs/data/material/components/progress/LinearWithValueLabel.tsx

packages/mui-material/src/LinearProgress/LinearProgress.d.ts

docs/data/material/components/progress/progress.md

mapache-salvaje

Docs changes look good! 👍

docs/data/material/components/progress/progress.md

packages/mui-material/src/CircularProgress/CircularProgress.test.js

siriwatknp

Good accessibility improvements overall — min/max props, dev warnings, and new demos are solid additions. A few issues to address:

packages/mui-material/src/CircularProgress/CircularProgress.js

packages/mui-material/src/CircularProgress/CircularProgress.test.js

siriwatknp · 2026-04-07T07:50:04Z

packages/mui-material/src/LinearProgress/LinearProgress.js

      if (isRtl) {
        transform = -transform;
      }
      inlineStyles.bar1.transform = `translateX(${transform}%)`;


Same division-by-zero issue here. If max === min, ((value - min) / (max - min)) → NaN. Should guard range > 0 before computing transforms, or clamp.

I think this is fine since we already have an error for min>=max, which is obvious developer error

Added a guard for both this one and circular progress

packages/mui-material/src/LinearProgress/LinearProgress.js

siriwatknp · 2026-04-07T07:50:04Z

packages/mui-material/src/CircularProgress/CircularProgress.js

+    circleStyle.strokeDashoffset = `${(((max - value) / (max - min)) * circumference).toFixed(3)}px`;
    rootStyle.transform = 'rotate(-90deg)';
+
+    rootProps['aria-valuenow'] = Math.round(value);


Nit: aria-valuemin and aria-valuemax are only set in the determinate branch. Per WAI-ARIA progressbar, aria-valuemin/aria-valuemax are optional when using the default 0-100 range. But when custom min/max are provided by the user for indeterminate (which is ignored here), no warning is emitted. Consider warning if min/max are provided with variant="indeterminate" since they have no effect.

docs/data/material/components/progress/LinearWithAriaValueText.js

docs/data/material/components/progress/CircularCustomScale.js

silviuaavram marked this pull request as ready for review April 2, 2026 07:59

silviuaavram requested review from Copilot, mapache-salvaje, mj12albert, mnajdova and siriwatknp April 2, 2026 07:59

Copilot started reviewing on behalf of silviuaavram April 2, 2026 07:59 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

mj12albert reviewed Apr 4, 2026

View reviewed changes

silviuaavram force-pushed the feat/progress-accessibility branch from 2e8c17d to a91d06e Compare April 6, 2026 07:48

silviuaavram added needs cherry-pick The PR should be cherry-picked to master after merge. v7.x labels Apr 6, 2026

mapache-salvaje reviewed Apr 6, 2026

View reviewed changes

mj12albert approved these changes Apr 7, 2026

View reviewed changes

docs/data/material/components/progress/progress.md Outdated Show resolved Hide resolved

packages/mui-material/src/CircularProgress/CircularProgress.test.js Show resolved Hide resolved

siriwatknp requested changes Apr 7, 2026

View reviewed changes

silviuaavram added 9 commits April 8, 2026 11:22

[circularprogress][linearprogress] Improve accessibility

04cb761

add linear query

ad2fc09

also add visible label to linear

c5e47c2

update proptypes

00a4465

linear with aria-valuetext

7a8564d

docs add example

a0fcd30

prettier

f35eec5

circular progress add props

1f9f030

add circular with different scale

d6868d9

silviuaavram added 15 commits April 8, 2026 11:22

pnpm docs:typescript:formatted

0ddb2bb

no need for proptypes in ts demo

2588f49

align examples

6c0f534

update docs

7e254ea

improve description

a069ed7

correct grammar

077eed7

docs typecript formatted

797350f

code review integration

e90e758

docs changes

4b3da8e

remove default

bf5a670

fix prop names

bfd8f22

improve circularprogress test

e7653f2

guard against division by 0

51d7654

warn when providing min/max with incorrect variant

409a3ea

improve demos

fac9022

silviuaavram force-pushed the feat/progress-accessibility branch from dba6fe7 to fac9022 Compare April 8, 2026 12:34

silviuaavram added 7 commits April 8, 2026 15:37

update values in docs

3dff108

provide better examples in docs

1411193

prettier

0fa34ce

docs:typescript:formatted

a042d9a

accept both values in test

d99727b

only warn when min or max are provided with wrong variant

489d488

regex for dashoffset too

ac8c332

Uh oh!

Conversation

silviuaavram commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

LinearProgress

CircularProgress

Uh oh!

mui-bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mj12albert Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mapache-salvaje left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

siriwatknp Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

silviuaavram Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

siriwatknp Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

silviuaavram commented Apr 1, 2026 •

edited

Loading

mui-bot commented Apr 1, 2026 •

edited

Loading