Improve Select Component a11y by adding combobox role and aria-contro…

…ls attribute Resolves: #35586
mui · Sep 3, 2023 · 942de8f · 942de8f
1 parent 31e2f14
commit 942de8f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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} />