[LoadingButton] Label progressbar by the LoadingButton (mui#30002)

docs/translations/api-docs/loading-button/loading-button.json

@@ -5,7 +5,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "loading": "If <code>true</code>, the loading indicator is shown.",
-    "loadingIndicator": "Element placed before the children if the button is in loading state.",
+    "loadingIndicator": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself.",
     "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "variant": "The variant to use."

packages/mui-lab/src/LoadingButton/LoadingButton.d.ts

@@ -36,6 +36,8 @@ export type LoadingButtonTypeMap<
     loading?: boolean;
     /**
      * Element placed before the children if the button is in loading state.
+     * The node should contain an element with `role="progressbar"` with an accessible name.
+     * By default we render a `CircularProgress` that is labelled by the button itself.
      * @default <CircularProgress color="inherit" size={16} />
      */
     loadingIndicator?: React.ReactNode;

packages/mui-lab/src/LoadingButton/LoadingButton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
-import { capitalize } from '@mui/material/utils';
+import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
@@ -134,20 +134,24 @@ const LoadingButtonLoadingIndicator = styled('div', {
     }),
 }));
 
-const LoadingIndicator = <CircularProgress color="inherit" size={16} />;
-
 const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiLoadingButton' });
   const {
     children,
     disabled = false,
+    id: idProp,
     loading = false,
-    loadingIndicator = LoadingIndicator,
+    loadingIndicator: loadingIndicatorProp,
     loadingPosition = 'center',
     variant = 'text',
     ...other
   } = props;
 
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? (
+    <CircularProgress aria-labelledby={id} color="inherit" size={16} />
+  );
+
   const ownerState = {
     ...props,
     disabled,
@@ -162,6 +166,7 @@ const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
   return (
     <LoadingButtonRoot
       disabled={disabled || loading}
+      id={id}
       ref={ref}
       {...other}
       variant={variant}
@@ -216,13 +221,19 @@ LoadingButton.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
   /**
    * If `true`, the loading indicator is shown.
    * @default false
    */
   loading: PropTypes.bool,
   /**
    * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator: PropTypes.node,

packages/mui-lab/src/LoadingButton/LoadingButton.test.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, describeConformance, screen } from 'test/utils';
+import { createRenderer, describeConformance, screen, within } from 'test/utils';
 import { expect } from 'chai';
 import Button from '@mui/material/Button';
 import LoadingButton, { loadingButtonClasses as classes } from '@mui/lab/LoadingButton';
@@ -45,6 +45,14 @@ describe('<LoadingButton />', () => {
 
       expect(screen.getByRole('button')).to.have.property('disabled', true);
     });
+
+    it('renders a progressbar that is labelled by the button', () => {
+      render(<LoadingButton loading>Submit</LoadingButton>);
+
+      const button = screen.getByRole('button');
+      const progressbar = within(button).getByRole('progressbar');
+      expect(progressbar).toHaveAccessibleName('Submit');
+    });
   });
 
   describe('prop: loadingIndicator', () => {