From 6647d591f8afb45491932a8e7c91670e38922596 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <gildas.garcia@gmail.com>
Date: Tue, 25 Sep 2018 23:08:47 +0200
Subject: [PATCH] [RFR] Automatically add id attribute on input if not
 specified and accessibility fixes

---
 packages/ra-ui-materialui/src/button/Button.js        |  1 +
 packages/ra-ui-materialui/src/button/CreateButton.js  |  1 +
 packages/ra-ui-materialui/src/form/FormInput.js       |  8 +++++++-
 packages/ra-ui-materialui/src/input/BooleanInput.js   |  4 ++++
 .../ra-ui-materialui/src/input/CheckboxGroupInput.js  | 11 ++++++++++-
 packages/ra-ui-materialui/src/input/FileInput.js      |  6 +++++-
 packages/ra-ui-materialui/src/input/Labeled.js        |  4 +++-
 .../src/input/RadioButtonGroupInput.js                | 10 +++++++++-
 8 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/ra-ui-materialui/src/button/Button.js b/packages/ra-ui-materialui/src/button/Button.js
index b05d3d5569c..cda05095510 100644
--- 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
index 4c8600a2829..07f67734a0c 100644
--- 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
index 07d1b03996b..651c7bffc52 100644
--- a/packages/ra-ui-materialui/src/form/FormInput.js
+++ b/packages/ra-ui-materialui/src/form/FormInput.js
@@ -21,7 +21,11 @@ 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(
                             {
@@ -29,6 +33,7 @@ export const FormInput = ({ classes, input, ...rest }) =>
                             },
                             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
index 079d7639b62..419120ca4f8 100644
--- 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
index 79731da11af..da8b89bb945 100644
--- 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
index 8a9e9a87d8e..d56282608e4 100644
--- 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,6 +151,7 @@ export class FileInput extends Component {
             classes = {},
             className,
             disableClick,
+            id,
             isRequired,
             label,
             maxSize,
@@ -157,12 +159,13 @@ export class FileInput extends Component {
             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
index 8c68e157897..7d257cb62e0 100644
--- 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
index b53f3ec8d5a..b226e230a0d 100644
--- 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,