[material-ui][Button] Apply id only if loading indicator is present (@aarongarciah) (#45339)

Co-authored-by: Aarón García Hervás <[email protected]>

Author: github-actions[bot]

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

@@ -531,9 +531,9 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     ...other
   } = props;
 
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? (
-    <CircularProgress aria-labelledby={id} color="inherit" size={16} />
+    <CircularProgress aria-labelledby={loadingId} color="inherit" size={16} />
   );
 
   const ownerState = {
@@ -600,7 +600,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       ref={ref}
       type={type}
-      id={id}
+      id={loading ? loadingId : idProp}
       {...other}
       classes={classes}
     >

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

@@ -792,6 +792,21 @@ describe('<Button />', () => {
       const progressbar = within(button).getByRole('progressbar');
       expect(progressbar).toHaveAccessibleName('Submit');
     });
+
+    it('has no id when `loading=false` and no `id` prop is present`', () => {
+      const id = 'some-id';
+      render(
+        <React.Fragment>
+          <Button />
+          <Button id={id} />
+        </React.Fragment>,
+      );
+
+      const buttons = screen.getAllByRole('button');
+
+      expect(buttons[0]).not.to.have.attribute('id');
+      expect(buttons[1]).to.have.attribute('id', id);
+    });
   });
 
   describe('prop: loadingIndicator', () => {

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

@@ -187,9 +187,9 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
     ...other
   } = props;
 
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? (
-    <CircularProgress aria-labelledby={id} color="inherit" size={16} />
+    <CircularProgress aria-labelledby={loadingId} color="inherit" size={16} />
   );
 
   const ownerState = {
@@ -207,7 +207,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
 
   return (
     <IconButtonRoot
-      id={id}
+      id={loading ? loadingId : idProp}
       className={clsx(classes.root, className)}
       centerRipple
       focusRipple={!disableFocusRipple}

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

@@ -192,6 +192,21 @@ describe('<IconButton />', () => {
       const progressbar = within(button).getByRole('progressbar');
       expect(progressbar).toHaveAccessibleName('Submit');
     });
+
+    it('has no id when `loading=false` and no `id` prop is present`', () => {
+      const id = 'some-id';
+      render(
+        <React.Fragment>
+          <IconButton />
+          <IconButton id={id} />
+        </React.Fragment>,
+      );
+
+      const buttons = screen.getAllByRole('button');
+
+      expect(buttons[0]).not.to.have.attribute('id');
+      expect(buttons[1]).to.have.attribute('id', id);
+    });
   });
 
   describe('prop: loadingIndicator', () => {