Set attributes to undefined (aka hide them) when false. Ultimately sh…

…ould be the same behavior, but cleaner html

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

@@ -474,6 +474,12 @@ describe('<Select />', () => {
       expect(getByRole('combobox')).to.have.attribute('aria-required', 'true');
     });
 
+    it('aria-required is not present if component is not required', () => {
+      const { getByRole } = render(<Select required={false} value="" />);
+
+      expect(getByRole('combobox')).not.to.have.attribute('aria-required');
+    });
+
     it('sets required attribute in input when component is required', () => {
       const { container } = render(<Select required value="" />);
 
@@ -486,6 +492,13 @@ describe('<Select />', () => {
       expect(getByRole('combobox')).to.have.attribute('aria-invalid', 'true');
     });
 
+    it('aria-invalid is not present if component is not in an error state', () => {
+      const { getByRole } = render(<Select value="" />);
+
+      expect(getByRole('combobox')).not.to.have.attribute('aria-invalid');
+    });
+
+
     it('indicates that activating the button displays a listbox', () => {
       const { getByRole } = render(<Select value="" />);
 

packages/mui-material/src/Select/SelectInput.js

@@ -504,8 +504,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         aria-label={ariaLabel}
         aria-labelledby={[labelId, buttonId].filter(Boolean).join(' ') || undefined}
         aria-describedby={ariaDescribedby}
-        aria-required={required}
-        aria-invalid={error}
+        aria-required={required ? 'true' : undefined}
+        aria-invalid={error ? 'true' : undefined}
         onKeyDown={handleKeyDown}
         onMouseDown={disabled || readOnly ? null : handleMouseDown}
         onBlur={handleBlur}