[Select] Add aria-disabled attribute (#20432)

mui · Apr 6, 2020 · 52b80a0 · 52b80a0
1 parent 27ada70
commit 52b80a0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
@@ -361,6 +361,18 @@ describe('<Select />', () => {
       expect(getByRole('button')).not.to.have.attribute('aria-expanded');
     });
 
+    it('sets aria-disabled="true" when component is disabled', () => {
+      const { getByRole } = render(<Select disabled value="" />);
+
+      expect(getByRole('button')).to.have.attribute('aria-disabled', 'true');
+    });
+
+    specify('aria-disabled is not present if component is not disabled', () => {
+      const { getByRole } = render(<Select disabled={false} value="" />);
+
+      expect(getByRole('button')).not.to.have.attribute('aria-disabled');
+    });
+
     it('indicates that activating the button displays a listbox', () => {
       const { getByRole } = render(<Select value="" />);
 

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -324,6 +324,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         data-mui-test="SelectDisplay"
         tabIndex={tabIndex}
         role="button"
+        aria-disabled={disabled ? 'true' : undefined}
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup="listbox"
         aria-label={ariaLabel}