From 955f94f72ba4d01473ba20f9e0bcf88e1e1467b9 Mon Sep 17 00:00:00 2001
From: Alexander Nanberg <alex.nanberg@hotmail.com>
Date: Mon, 26 Nov 2018 17:56:41 +0100
Subject: [PATCH] fix(a11y): correct label "for" references to fields (#1904)

---
 .../Editor/EditorControlPane/EditorControl.js |  7 ++++---
 .../Editor/EditorControlPane/Widget.js        |  2 +-
 packages/netlify-cms-ui-default/src/Toggle.js | 19 ++++++++++++++-----
 .../src/DateControl.js                        |  5 +++--
 .../src/SelectControl.js                      |  2 +-
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index f95b6d10..7df274f6 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -150,6 +150,8 @@ class EditorControl extends React.Component {
     activeLabel: false,
   };
 
+  uniqueFieldId = uniqueId(`${this.props.field.get('name')}-field-`);
+
   render() {
     const {
       value,
@@ -176,7 +178,6 @@ class EditorControl extends React.Component {
     const widget = resolveWidget(widgetName);
     const fieldName = field.get('name');
     const fieldHint = field.get('hint');
-    const uniqueFieldId = uniqueId();
     const metadata = fieldsMetaData && fieldsMetaData.get(fieldName);
     const errors = fieldsErrors && fieldsErrors.get(fieldName);
     return (
@@ -197,7 +198,7 @@ class EditorControl extends React.Component {
             { [styles.labelActive]: this.state.styleActive },
             { [styles.labelError]: !!errors },
           )}
-          htmlFor={fieldName + uniqueFieldId}
+          htmlFor={this.uniqueFieldId}
         >
           {field.get('label', field.get('name'))}
         </label>
@@ -213,7 +214,7 @@ class EditorControl extends React.Component {
           classNameLabelActive={styles.labelActive}
           controlComponent={widget.control}
           field={field}
-          uniqueFieldId={uniqueFieldId}
+          uniqueFieldId={this.uniqueFieldId}
           value={value}
           mediaPaths={mediaPaths}
           metadata={metadata}
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
index 10d8fc57..e9740a35 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
@@ -237,7 +237,7 @@ export default class Widget extends Component {
       onAddAsset,
       onRemoveInsertedMedia,
       getAsset,
-      forID: field.get('name') + uniqueFieldId,
+      forID: uniqueFieldId,
       ref: this.processInnerControlRef,
       classNameWrapper,
       classNameWidget,
diff --git a/packages/netlify-cms-ui-default/src/Toggle.js b/packages/netlify-cms-ui-default/src/Toggle.js
index 0bada64e..7810380b 100644
--- a/packages/netlify-cms-ui-default/src/Toggle.js
+++ b/packages/netlify-cms-ui-default/src/Toggle.js
@@ -4,7 +4,7 @@ import styled, { css } from 'react-emotion';
 import ReactToggled from 'react-toggled';
 import { colors, colorsRaw, shadows, transitions } from './styles';
 
-const ToggleContainer = styled.span`
+const ToggleContainer = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -12,6 +12,10 @@ const ToggleContainer = styled.span`
   width: 40px;
   height: 20px;
   cursor: pointer;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
 `;
 
 const ToggleHandle = styled.span`
@@ -40,6 +44,7 @@ const ToggleBackground = styled.span`
 `;
 
 const Toggle = ({
+  id,
   active,
   onChange,
   onFocus,
@@ -50,14 +55,17 @@ const Toggle = ({
   Handle = ToggleHandle,
 }) => (
   <ReactToggled on={active} onToggle={onChange}>
-    {({ on, getElementTogglerProps }) => (
+    {({ on, getTogglerProps }) => (
       <Container
-        role="switch"
-        aria-checked={on.toString()}
+        id={id}
         onFocus={onFocus}
         onBlur={onBlur}
         className={className}
-        {...getElementTogglerProps()}
+        {...getTogglerProps({
+          role: 'switch',
+          'aria-checked': on.toString(),
+          'aria-expanded': null,
+        })}
       >
         <Background isActive={on} />
         <Handle isActive={on} />
@@ -67,6 +75,7 @@ const Toggle = ({
 );
 
 Toggle.propTypes = {
+  id: PropTypes.string,
   active: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
diff --git a/packages/netlify-cms-widget-date/src/DateControl.js b/packages/netlify-cms-widget-date/src/DateControl.js
index c919edff..bc31e099 100644
--- a/packages/netlify-cms-widget-date/src/DateControl.js
+++ b/packages/netlify-cms-widget-date/src/DateControl.js
@@ -12,6 +12,7 @@ injectGlobal`
 export default class DateControl extends React.Component {
   static propTypes = {
     field: PropTypes.object.isRequired,
+    forID: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
     setActiveStyle: PropTypes.func.isRequired,
@@ -102,7 +103,7 @@ export default class DateControl extends React.Component {
   };
 
   render() {
-    const { value, classNameWrapper, setActiveStyle } = this.props;
+    const { forID, value, classNameWrapper, setActiveStyle } = this.props;
     const { format, dateFormat, timeFormat } = this.formats;
     return (
       <DateTime
@@ -112,7 +113,7 @@ export default class DateControl extends React.Component {
         onChange={this.handleChange}
         onFocus={setActiveStyle}
         onBlur={this.onBlur}
-        inputProps={{ className: classNameWrapper }}
+        inputProps={{ className: classNameWrapper, id: forID }}
       />
     );
   }
diff --git a/packages/netlify-cms-widget-select/src/SelectControl.js b/packages/netlify-cms-widget-select/src/SelectControl.js
index eed43d84..4a3b2e31 100644
--- a/packages/netlify-cms-widget-select/src/SelectControl.js
+++ b/packages/netlify-cms-widget-select/src/SelectControl.js
@@ -79,7 +79,7 @@ export default class SelectControl extends React.Component {
 
     return (
       <Select
-        id={forID}
+        inputId={forID}
         value={selectedValue}
         onChange={this.handleChange}
         className={classNameWrapper}