From 942de8f1fc31c32ceef04a9f7a32ceb5092a3a01 Mon Sep 17 00:00:00 2001
From: Lingzhi Xu <lingzhi.xu@salesforce.com>
Date: Sat, 2 Sep 2023 19:45:17 -0700
Subject: [PATCH] Improve Select Component a11y by adding combobox role and
 aria-controls attribute Resolves: #35586

---
 packages/mui-material/src/Select/Select.test.js | 6 ++++++
 packages/mui-material/src/Select/SelectInput.js | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 0ee8903cc2cd83..d92ff9a96d9a3f 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -478,6 +478,12 @@ describe('<Select />', () => {
       expect(getByRole('listbox')).toBeVisible();
     });
 
+    it('indicates that input element has combobox role and aria-controls set to id of popup', () => {
+      const { getByRole } = render(<Select open value="" />);
+
+      expect(getByRole('combobox')).to.have.attribute('aria-controls', 'menu-');
+    });
+
     specify('the listbox is focusable', () => {
       const { getByRole } = render(<Select open value="" />);
 
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 72452dc1d88857..b6b8e1311681c3 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -529,6 +529,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         className={classes.nativeInput}
         autoFocus={autoFocus}
         ownerState={ownerState}
+        role="combobox"
+        aria-controls={`menu-${name || ''}`}
         {...other}
       />
       <SelectIcon as={IconComponent} className={classes.icon} ownerState={ownerState} />