Change toggle state when click label (#3530)

app/javascript/mastodon/features/notifications/components/setting_toggle.js

@@ -10,7 +10,6 @@ class SettingToggle extends React.PureComponent {
     settingKey: PropTypes.array.isRequired,
     label: PropTypes.node.isRequired,
     onChange: PropTypes.func.isRequired,
-    htmlFor: PropTypes.string,
   }
 
   onChange = (e) => {
@@ -18,13 +17,14 @@ class SettingToggle extends React.PureComponent {
   }
 
   render () {
-    const { settings, settingKey, label, onChange, htmlFor = '' } = this.props;
+    const { settings, settingKey, label, onChange } = this.props;
+    const id = `setting-toggle-${settingKey.join('-')}`;
 
     return (
-      <label htmlFor={htmlFor} className='setting-toggle__label'>
-        <Toggle checked={settings.getIn(settingKey)} onChange={this.onChange} />
-        <span className='setting-toggle'>{label}</span>
-      </label>
+      <div className='setting-toggle'>
+        <Toggle id={id} checked={settings.getIn(settingKey)} onChange={this.onChange} />
+        <label htmlFor={id} className='setting-toggle__label'>{label}</label>
+      </div>
     );
   }
 

app/javascript/styles/components.scss

@@ -2172,13 +2172,12 @@ button.icon-button.active i.fa-retweet {
   left: 20px;
 }
 
-.setting-toggle__label {
+.setting-toggle {
   display: block;
   line-height: 24px;
-  vertical-align: middle;
 }
 
-.setting-toggle {
+.setting-toggle__label {
   color: $ui-primary-color;
   display: inline-block;
   margin-bottom: 14px;