[material-ui][Select] Do not set aria-controls when closed (#44919)

Signed-off-by: siddhantantil39 <[email protected]> Co-authored-by: Albert Yu <[email protected]>
mui · Jan 7, 2025 · 0221d17 · 0221d17
1 parent 4d1bb85
commit 0221d17
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
@@ -517,6 +517,11 @@ describe('<Select />', () => {
       expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-controls', listboxId);
     });
 
+    it('does not set aria-controls when closed', () => {
+      const { getByRole } = render(<Select open={false} value="" />);
+      expect(getByRole('combobox', { hidden: true })).to.not.have.attribute('aria-controls');
+    });
+
     specify('the listbox is focusable', async () => {
       const { getByRole } = render(<Select open value="" />);
 

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -497,7 +497,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         ref={handleDisplayRef}
         tabIndex={tabIndex}
         role="combobox"
-        aria-controls={listboxId}
+        aria-controls={open ? listboxId : undefined}
         aria-disabled={disabled ? 'true' : undefined}
         aria-expanded={open ? 'true' : 'false'}
         aria-haspopup="listbox"