[Select] Set aria-required & aria-invalid on combobox instead o…

…f hidden input (#44731)

Co-authored-by: Albert Yu <[email protected]>

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

@@ -468,6 +468,36 @@ describe('<Select />', () => {
       expect(getByRole('combobox')).not.to.have.attribute('aria-disabled');
     });
 
+    it('sets aria-required="true" when component is required', () => {
+      const { getByRole } = render(<Select required value="" />);
+
+      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="" />);
+
+      expect(container.querySelector('input')).to.have.property('required', true);
+    });
+
+    it('sets aria-invalid="true" when component is in the error state', () => {
+      const { getByRole } = render(<Select error value="" />);
+
+      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

@@ -124,6 +124,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     open: openProp,
     readOnly,
     renderValue,
+    required,
     SelectDisplayProps = {},
     tabIndex: tabIndexProp,
     // catching `type` from Input which makes no sense for SelectInput
@@ -503,6 +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 ? 'true' : undefined}
+        aria-invalid={error ? 'true' : undefined}
         onKeyDown={handleKeyDown}
         onMouseDown={disabled || readOnly ? null : handleMouseDown}
         onBlur={handleBlur}
@@ -534,6 +537,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         disabled={disabled}
         className={classes.nativeInput}
         autoFocus={autoFocus}
+        required={required}
         {...other}
         ownerState={ownerState}
       />
@@ -700,6 +704,10 @@ SelectInput.propTypes = {
    * @returns {ReactNode}
    */
   renderValue: PropTypes.func,
+  /**
+   * If `true`, the component is required.
+   */
+  required: PropTypes.bool,
   /**
    * Props applied to the clickable div element.
    */