[InputBase] Pass aria attributes to input

docs/src/pages/demos/autocomplete/IntegrationReactSelect.js

@@ -123,14 +123,14 @@ function Control(props) {
       fullWidth
       InputProps={{
         inputComponent,
-        inputProps: {
-          className: props.selectProps.classes.input,
-          inputRef: props.innerRef,
-          children: props.children,
-          ...props.innerProps,
+        inputRef: props.innerRef,
+        children: props.children,
+        classes: {
+          input: props.selectProps.classes.input,
         },
+        ...props.innerProps,
       }}
-      {...props.selectProps.textFieldProps}
+      {...props.selectProps.TextFieldProps}
     />
   );
 }
@@ -248,7 +248,7 @@ function IntegrationReactSelect() {
         <Select
           classes={classes}
           styles={selectStyles}
-          textFieldProps={{
+          TextFieldProps={{
             label: 'Label',
             InputLabelProps: {
               shrink: true,

docs/src/pages/demos/autocomplete/IntegrationReactSelect.tsx

@@ -140,14 +140,14 @@ function Control(props: ControlProps<OptionType>) {
       fullWidth
       InputProps={{
         inputComponent,
-        inputProps: {
-          className: props.selectProps.classes.input,
-          inputRef: props.innerRef,
-          children: props.children,
-          ...props.innerProps,
+        inputRef: props.innerRef,
+        children: props.children,
+        classes: {
+          input: props.selectProps.classes.input,
         },
+        ...props.innerProps,
       }}
-      {...props.selectProps.textFieldProps}
+      {...props.selectProps.TextFieldProps}
     />
   );
 }
@@ -265,7 +265,7 @@ function IntegrationReactSelect() {
         <Select
           classes={classes}
           styles={selectStyles}
-          textFieldProps={{
+          TextFieldProps={{
             label: 'Label',
             InputLabelProps: {
               shrink: true,

docs/src/pages/demos/dialogs/MaxWidthDialog.js

@@ -79,10 +79,8 @@ class MaxWidthDialog extends React.Component {
                 <Select
                   value={this.state.maxWidth}
                   onChange={this.handleMaxWidthChange}
-                  inputProps={{
-                    name: 'max-width',
-                    id: 'max-width',
-                  }}
+                  name="max-width"
+                  id="max-width"
                 >
                   <MenuItem value={false}>false</MenuItem>
                   <MenuItem value="xs">xs</MenuItem>

docs/src/pages/demos/pickers/TimePickers.js

@@ -29,7 +29,7 @@ function TimePickers(props) {
         InputLabelProps={{
           shrink: true,
         }}
-        inputProps={{
+        InputProps={{
           step: 300, // 5 min
         }}
       />

docs/src/pages/demos/selects/ControlledOpenSelect.js

@@ -47,10 +47,8 @@ function ControlledOpenSelect() {
           onOpen={handleOpen}
           value={age}
           onChange={handleChange}
-          inputProps={{
-            name: 'age',
-            id: 'demo-controlled-open-select',
-          }}
+          name="age"
+          id="demo-controlled-open-select"
         >
           <MenuItem value="">
             <em>None</em>

docs/src/pages/demos/selects/MultipleSelect.js

@@ -179,9 +179,7 @@ function MultipleSelect() {
           native
           value={personName}
           onChange={handleChangeMultiple}
-          inputProps={{
-            id: 'select-multiple-native',
-          }}
+          id="select-multiple-native"
         >
           {names.map(name => (
             <option key={name} value={name}>

docs/src/pages/demos/selects/NativeSelects.js

@@ -51,10 +51,8 @@ function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
-          inputProps={{
-            name: 'age',
-            id: 'age-native-simple',
-          }}
+          name="age"
+          id="age-native-simple"
         >
           <option value="" />
           <option value={10}>Ten</option>
@@ -176,9 +174,7 @@ function NativeSelects() {
           value={state.age}
           onChange={handleChange('age')}
           name="age"
-          inputProps={{
-            id: 'age-native-required',
-          }}
+          id="age-native-required"
         >
           <option value="" />
           <option value={10}>Ten</option>

docs/src/pages/demos/selects/SimpleSelect.js

@@ -47,14 +47,7 @@ function SimpleSelect() {
     <form className={classes.root} autoComplete="off">
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="age-simple">Age</InputLabel>
-        <Select
-          value={values.age}
-          onChange={handleChange}
-          inputProps={{
-            name: 'age',
-            id: 'age-simple',
-          }}
-        >
+        <Select value={values.age} onChange={handleChange} name="age" id="age-simple">
           <MenuItem value="">
             <em>None</em>
           </MenuItem>
@@ -207,9 +200,7 @@ function SimpleSelect() {
           value={values.age}
           onChange={handleChange}
           name="age"
-          inputProps={{
-            id: 'age-required',
-          }}
+          id="age-required"
           className={classes.selectEmpty}
         >
           <MenuItem value="">

docs/src/pages/demos/text-fields/InputAdornments.js

@@ -103,9 +103,7 @@ function InputAdornments() {
           onChange={handleChange('weight')}
           endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
           aria-describedby="weight-helper-text"
-          inputProps={{
-            'aria-label': 'Weight',
-          }}
+          aria-label="Weight"
         />
         <FormHelperText id="weight-helper-text">Weight</FormHelperText>
       </FormControl>

docs/src/pages/demos/text-fields/InputAdornments.tsx

@@ -107,9 +107,7 @@ function InputAdornments() {
           onChange={handleChange('weight')}
           endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
           aria-describedby="weight-helper-text"
-          inputProps={{
-            'aria-label': 'Weight',
-          }}
+          aria-label="Weight"
         />
         <FormHelperText id="weight-helper-text">Weight</FormHelperText>
       </FormControl>

docs/src/pages/demos/text-fields/Inputs.js

@@ -17,36 +17,10 @@ function Inputs(props) {
   const { classes } = props;
   return (
     <div className={classes.container}>
-      <Input
-        defaultValue="Hello world"
-        className={classes.input}
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
-      <Input
-        placeholder="Placeholder"
-        className={classes.input}
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
-      <Input
-        value="Disabled"
-        className={classes.input}
-        disabled
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
-      <Input
-        defaultValue="Error"
-        className={classes.input}
-        error
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
+      <Input defaultValue="Hello world" className={classes.input} aria-label="Description" />
+      <Input placeholder="Placeholder" className={classes.input} aria-label="Description" />
+      <Input value="Disabled" className={classes.input} disabled aria-label="Description" />
+      <Input defaultValue="Error" className={classes.input} error aria-label="Description" />
     </div>
   );
 }

docs/src/pages/demos/text-fields/Inputs.tsx

@@ -20,36 +20,10 @@ function Inputs(props: Props) {
   const { classes } = props;
   return (
     <div className={classes.container}>
-      <Input
-        defaultValue="Hello world"
-        className={classes.input}
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
-      <Input
-        placeholder="Placeholder"
-        className={classes.input}
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
-      <Input
-        value="Disabled"
-        className={classes.input}
-        disabled
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
-      <Input
-        defaultValue="Error"
-        className={classes.input}
-        error
-        inputProps={{
-          'aria-label': 'Description',
-        }}
-      />
+      <Input defaultValue="Hello world" className={classes.input} aria-label="Description" />
+      <Input placeholder="Placeholder" className={classes.input} aria-label="Description" />
+      <Input value="Disabled" className={classes.input} disabled aria-label="Description" />
+      <Input defaultValue="Error" className={classes.input} error aria-label="Description" />
     </div>
   );
 }

docs/src/pages/demos/text-fields/text-fields.md

@@ -40,9 +40,9 @@ The `TextField` wrapper component is a complete form control including a label,
 and [`FormHelperText`](/api/form-helper-text/)
 ) that you can leverage directly to significantly customize your form inputs.
 
-You might also have noticed that some native HTML input properties are missing from the `TextField` component.
+You might also have noticed that some properties are missing from the `TextField` component.
 This is on purpose.
-The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use `inputProps` (and `InputProps`, `InputLabelProps` properties) if you want to avoid some boilerplate.
+The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use the `FormHelperTextProps`, `InputLabel` and `SelectProps` properties if you want to avoid some boilerplate.
 
 {{"demo": "pages/demos/text-fields/ComposedTextField.js"}}
 

docs/src/pages/discover-more/showcase/Showcase.js

@@ -87,7 +87,7 @@ function Showcase(props) {
     <div className={classes.root}>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="sort">Sort by</InputLabel>
-        <Select value={sortFunctionName} onChange={handleChangeSort} inputProps={{ id: 'sort' }}>
+        <Select value={sortFunctionName} onChange={handleChangeSort} id="sort">
           <MenuItem value="dateAdded">{t('newest')}</MenuItem>
           <MenuItem value="similarWebVisits">{t('traffic')}</MenuItem>
           <MenuItem value="stars">{t('stars')}</MenuItem>

docs/src/pages/guides/api/api.md

@@ -77,7 +77,7 @@ Nested components inside a component have:
 - their own flattened properties when these are key to the top level component abstraction,
   for instance and `id` property for the `Input` component.
 - their own `xxxProps` property when users might need to tweak the internal render method's sub-components,
-  for instance, exposing the `inputProps` and `InputProps` properties on components that use `Input` internally.
+  for instance, exposing the `InputProps` property on components that use `Input` internally.
 - their own `xxxComponent` property for performing component injection.
 - their own `xxxRef` property when user might need to perform imperative actions,
   for instance, exposing a `inputRef` property to access the native `input` on the `Input` component.

docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js

@@ -17,9 +17,7 @@ function RFTextField(props) {
       {...input}
       {...other}
       InputProps={{
-        inputProps: {
-          autoComplete,
-        },
+        autoComplete,
         ...InputProps,
       }}
       helperText={touched ? error || submitError : ''}

docs/src/pages/style/color/ColorTool.js

@@ -193,9 +193,7 @@ class ColorTool extends React.Component {
             id={intent}
             value={intentInput}
             onChange={this.handleChangeColor(intent)}
-            inputProps={{
-              'aria-label': `${capitalize(intent)} color`,
-            }}
+            aria-label={`${capitalize(intent)} color`}
             fullWidth
           />
           <div className={classes.sliderContainer}>