[RFR] Automatically add id attribute on input if not specified and ac…

…cessibility fixes
marmelab · Sep 25, 2018 · 6647d59 · 6647d59
1 parent bdeb8f4
commit 6647d59
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 5 deletions.
diff --git a/packages/ra-ui-materialui/src/button/Button.js b/packages/ra-ui-materialui/src/button/Button.js
@@ -61,6 +61,7 @@ const Button = ({
                 className={classnames(classes.button, className)}
                 color={color}
                 size={size}
+                aria-label={label && translate(label, { _: label })}
                 {...rest}
             >
                 {alignIcon === 'left' &&

diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js
@@ -44,6 +44,7 @@ const CreateButton = ({
                 color="primary"
                 className={classnames(classes.floating, className)}
                 to={`${basePath}/create`}
+                aria-label={label && translate(label)}
                 {...rest}
             >
                 <ContentAdd />

diff --git a/packages/ra-ui-materialui/src/form/FormInput.js b/packages/ra-ui-materialui/src/form/FormInput.js
@@ -21,14 +21,19 @@ export const FormInput = ({ classes, input, ...rest }) =>
             )}
         >
             {input.props.addLabel ? (
-                <Labeled {...input.props} {...sanitizeRestProps(rest)}>
+                <Labeled
+                    id={input.props.id || input.props.source}
+                    {...input.props}
+                    {...sanitizeRestProps(rest)}
+                >
                     {React.cloneElement(input, {
                         className: classnames(
                             {
                                 [classes.input]: !input.props.fullWidth,
                             },
                             input.props.className
                         ),
+                        id: input.props.id || input.props.source,
                         ...rest,
                     })}
                 </Labeled>
@@ -40,6 +45,7 @@ export const FormInput = ({ classes, input, ...rest }) =>
                         },
                         input.props.className
                     ),
+                    id: input.props.id || input.props.source,
                     ...rest,
                 })
             )}

diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.js b/packages/ra-ui-materialui/src/input/BooleanInput.js
@@ -15,6 +15,7 @@ export class BooleanInput extends Component {
     render() {
         const {
             className,
+            id,
             input,
             isRequired,
             label,
@@ -29,8 +30,10 @@ export class BooleanInput extends Component {
         return (
             <FormGroup className={className} {...sanitizeRestProps(rest)}>
                 <FormControlLabel
+                    htmlFor={id}
                     control={
                         <Switch
+                            id={id}
                             color="primary"
                             checked={!!value}
                             onChange={this.handleChange}
@@ -54,6 +57,7 @@ export class BooleanInput extends Component {
 
 BooleanInput.propTypes = {
     className: PropTypes.string,
+    id: PropTypes.string,
     input: PropTypes.object,
     isRequired: PropTypes.bool,
     label: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js
@@ -107,6 +107,7 @@ export class CheckboxGroupInput extends Component {
 
     renderCheckbox = choice => {
         const {
+            id,
             input: { value },
             optionText,
             optionValue,
@@ -121,6 +122,7 @@ export class CheckboxGroupInput extends Component {
                 : get(choice, optionText);
         return (
             <FormControlLabel
+                htmlFor={`${id}_${get(choice, optionValue)}`}
                 key={get(choice, optionValue)}
                 checked={
                     value
@@ -130,7 +132,13 @@ export class CheckboxGroupInput extends Component {
                 }
                 onChange={this.handleCheck}
                 value={String(get(choice, optionValue))}
-                control={<Checkbox color="primary" {...options} />}
+                control={
+                    <Checkbox
+                        id={`${id}_${get(choice, optionValue)}`}
+                        color="primary"
+                        {...options}
+                    />
+                }
                 label={
                     translateChoice
                         ? translate(choiceName, { _: choiceName })
@@ -192,6 +200,7 @@ CheckboxGroupInput.propTypes = {
     label: PropTypes.string,
     source: PropTypes.string,
     options: PropTypes.object,
+    id: PropTypes.string,
     input: PropTypes.shape({
         onChange: PropTypes.func.isRequired,
     }),

diff --git a/packages/ra-ui-materialui/src/input/FileInput.js b/packages/ra-ui-materialui/src/input/FileInput.js
@@ -31,6 +31,7 @@ export class FileInput extends Component {
         classes: PropTypes.object,
         className: PropTypes.string,
         disableClick: PropTypes.bool,
+        id: PropTypes.string,
         input: PropTypes.object,
         isRequired: PropTypes.bool,
         label: PropTypes.string,
@@ -150,19 +151,21 @@ export class FileInput extends Component {
             classes = {},
             className,
             disableClick,
+            id,
             isRequired,
             label,
             maxSize,
             minSize,
             multiple,
             resource,
             source,
-            options,
+            options = {},
             ...rest
         } = this.props;
 
         return (
             <Labeled
+                id={id}
                 label={label}
                 className={classnames(classes.root, className)}
                 source={source}
@@ -180,6 +183,7 @@ export class FileInput extends Component {
                         multiple={multiple}
                         className={classes.dropZone}
                         {...options}
+                        inputProps={{ id, ...options.inputProps }}
                     >
                         {this.label()}
                     </Dropzone>

diff --git a/packages/ra-ui-materialui/src/input/Labeled.js b/packages/ra-ui-materialui/src/input/Labeled.js
@@ -43,6 +43,7 @@ export const Labeled = ({
     classes,
     className,
     fullWidth,
+    id,
     input,
     isRequired,
     label,
@@ -68,7 +69,7 @@ export const Labeled = ({
             fullWidth={fullWidth}
             error={meta && meta.touched && meta.error}
         >
-            <InputLabel shrink className={classes.label}>
+            <InputLabel htmlFor={id} shrink className={classes.label}>
                 <FieldTitle
                     label={label}
                     source={source}
@@ -95,6 +96,7 @@ Labeled.propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
     fullWidth: PropTypes.bool,
+    id: PropTypes.string,
     input: PropTypes.object,
     isRequired: PropTypes.bool,
     label: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js
@@ -83,6 +83,7 @@ export class RadioButtonGroupInput extends Component {
 
     renderRadioButton = choice => {
         const {
+            id,
             optionText,
             optionValue,
             translate,
@@ -95,9 +96,15 @@ export class RadioButtonGroupInput extends Component {
                 : get(choice, optionText);
         return (
             <FormControlLabel
+                htmlFor={`${id}_${get(choice, optionValue)}`}
                 key={get(choice, optionValue)}
                 value={get(choice, optionValue)}
-                control={<Radio color="primary" />}
+                control={
+                    <Radio
+                        id={`${id}_${get(choice, optionValue)}`}
+                        color="primary"
+                    />
+                }
                 label={
                     translateChoice
                         ? translate(choiceName, { _: choiceName })
@@ -171,6 +178,7 @@ RadioButtonGroupInput.propTypes = {
     choices: PropTypes.arrayOf(PropTypes.object),
     classes: PropTypes.object,
     className: PropTypes.string,
+    id: PropTypes.string,
     input: PropTypes.object,
     isRequired: PropTypes.bool,
     label: PropTypes.string,