fix(a11y): correct label "for" references to fields (#1904)

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}

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,

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"
+        id={id}
-        aria-checked={on.toString()}
         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,

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 }}
       />
     );
   }

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}