[circularprogress][linearprogress] Improve accessibility

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CircularCustomScale() {
+  const [progress, setProgress] = React.useState(10);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 20 ? 10 : prevProgress + 2));
+    }, 800);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <CircularProgress
+      variant="determinate"
+      min={10}
+      max={20}
+      value={progress}
+      aria-label="Loading"
+    />
+  );
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CircularCustomScale() {
+  const [progress, setProgress] = React.useState(10);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 20 ? 10 : prevProgress + 2));
+    }, 800);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <CircularProgress
+      variant="determinate"
+      min={10}
+      max={20}
+      value={progress}
+      aria-label="Loading"
+    />
+  );
+}

docs/data/material/components/progress/CircularCustomScale.tsx.preview

@@ -0,0 +1,7 @@
+<CircularProgress
+  variant="determinate"
+  min={10}
+  max={20}
+  value={progress}
+  aria-label="Loading"
+/>

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

@@ -39,8 +39,8 @@ function CircularProgressWithLabel(props) {
 CircularProgressWithLabel.propTypes = {
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value: PropTypes.number.isRequired,
 };

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

@@ -0,0 +1,10 @@
+import Box from '@mui/material/Box';
+import LinearProgress from '@mui/material/LinearProgress';
+
+export default function LinearQuery() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgress aria-label="Loading…" variant="query" />
+    </Box>
+  );
+}

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

@@ -0,0 +1,10 @@
+import Box from '@mui/material/Box';
+import LinearProgress from '@mui/material/LinearProgress';
+
+export default function LinearQuery() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgress aria-label="Loading…" variant="query" />
+    </Box>
+  );
+}

docs/data/material/components/progress/LinearQuery.tsx.preview

@@ -0,0 +1 @@
+<LinearProgress aria-label="Loading…" variant="query" />

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import LinearProgress from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+function LinearProgressWithLabelAndValue({ max, min, value, ...rest }) {
+  const progressText = `Elevator at floor ${value} out of ${max}.`;
+  const progressId = React.useId();
+  return (
+    <div>
+      <Typography
+        id={progressId}
+        variant="body2"
+        color="text.secondary"
+        sx={{ mr: 1 }}
+      >
+        Elevator status
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ width: '100%', mr: 1 }}>
+          <LinearProgress
+            variant="determinate"
+            aria-labelledby={progressId}
+            aria-valuetext={progressText}
+            min={min}
+            max={max}
+            value={value}
+            {...rest}
+          />
+        </Box>
+        <Box sx={{ whiteSpace: 'nowrap' }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {progressText}
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+LinearProgressWithLabelAndValue.propTypes = {
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max: PropTypes.number.isRequired,
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min: PropTypes.number.isRequired,
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between `min` and `max`.
+   */
+  value: PropTypes.number.isRequired,
+};
+
+export default function LinearWithAriaValueText() {
+  const [progress, setProgress] = React.useState(1);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 10 ? 1 : prevProgress + 1));
+    }, 800);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgressWithLabelAndValue value={progress} min={1} max={10} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+type LinearProgressWithLabelAndValueProps = LinearProgressProps & {
+  min: number;
+  max: number;
+  value: number;
+};
+
+function LinearProgressWithLabelAndValue({
+  max,
+  min,
+  value,
+  ...rest
+}: LinearProgressWithLabelAndValueProps) {
+  const progressText = `Elevator at floor ${value} out of ${max}.`;
+  const progressId = React.useId();
+  return (
+    <div>
+      <Typography
+        id={progressId}
+        variant="body2"
+        color="text.secondary"
+        sx={{ mr: 1 }}
+      >
+        Elevator status
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ width: '100%', mr: 1 }}>
+          <LinearProgress
+            variant="determinate"
+            aria-labelledby={progressId}
+            aria-valuetext={progressText}
+            min={min}
+            max={max}
+            value={value}
+            {...rest}
+          />
+        </Box>
+        <Box sx={{ whiteSpace: 'nowrap' }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {progressText}
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+export default function LinearWithAriaValueText() {
+  const [progress, setProgress] = React.useState(1);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 10 ? 1 : prevProgress + 1));
+    }, 800);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgressWithLabelAndValue value={progress} min={1} max={10} />
+    </Box>
+  );
+}

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

@@ -0,0 +1 @@
+<LinearProgressWithLabelAndValue value={progress} min={1} max={10} />

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

@@ -4,29 +4,35 @@ import LinearProgress from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 
-function LinearProgressWithLabel(props) {
+function LinearProgressWithLabelAndValue(props) {
+  const progressId = React.useId();
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 1 }}>
-        <LinearProgress
-          variant="determinate"
-          aria-label="Upload photos"
-          {...props}
-        />
+    <div>
+      <Typography id={progressId} variant="body2" color="text.secondary">
+        Uploading photos…
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ width: '100%', mr: 1 }}>
+          <LinearProgress
+            variant="determinate"
+            aria-labelledby={progressId}
+            {...props}
+          />
+        </Box>
+        <Box sx={{ minWidth: 35 }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {`${Math.round(props.value)}%`}
+          </Typography>
+        </Box>
       </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {`${Math.round(props.value)}%`}
-        </Typography>
-      </Box>
-    </Box>
+    </div>
   );
 }
 
-LinearProgressWithLabel.propTypes = {
+LinearProgressWithLabelAndValue.propTypes = {
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value: PropTypes.number.isRequired,
 };
@@ -45,7 +51,7 @@ export default function LinearWithValueLabel() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <LinearProgressWithLabel value={progress} />
+      <LinearProgressWithLabelAndValue value={progress} />
     </Box>
   );
 }

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

@@ -3,23 +3,30 @@ import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgres
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 
-function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+function LinearProgressWithLabelAndValue(
+  props: LinearProgressProps & { value: number },
+) {
+  const progressId = React.useId();
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 1 }}>
-        <LinearProgress
-          variant="determinate"
-          aria-label="Upload photos"
-          {...props}
-        />
+    <div>
+      <Typography id={progressId} variant="body2" color="text.secondary">
+        Uploading photos…
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ width: '100%', mr: 1 }}>
+          <LinearProgress
+            variant="determinate"
+            aria-labelledby={progressId}
+            {...props}
+          />
+        </Box>
+        <Box sx={{ minWidth: 35 }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {`${Math.round(props.value)}%`}
+          </Typography>
+        </Box>
       </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography
-          variant="body2"
-          sx={{ color: 'text.secondary' }}
-        >{`${Math.round(props.value)}%`}</Typography>
-      </Box>
-    </Box>
+    </div>
   );
 }
 
@@ -37,7 +44,7 @@ export default function LinearWithValueLabel() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <LinearProgressWithLabel value={progress} />
+      <LinearProgressWithLabelAndValue value={progress} />
     </Box>
   );
 }

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

@@ -1 +1 @@
-<LinearProgressWithLabel value={progress} />
+<LinearProgressWithLabelAndValue value={progress} />