SwitchControl text to left, right or top of control now toggles checked state

Partial resolution for brave#8243 since many usages do not use the built-in text
but render their own text separately. A subsequent commit will address converting these
usages.

This also converts text from span to label for accessbility and more appropriate renderer defaults (the cursor).

Author: petemill

app/renderer/components/common/switchControl.js

@@ -36,18 +36,19 @@ class SwitchControl extends ImmutableComponent {
     >
       {
         this.props.leftl10nId && this.props.topl10nId
-        ? <div className='switchControlText'><div className='switchControlLeftText'><div className='switchSpacer'>&nbsp;</div><span className='switchControlLeftText' data-l10n-id={this.props.leftl10nId} /></div></div>
+        ? <div className='switchControlText'><div className='switchControlLeftText'><div className='switchSpacer'>&nbsp;</div><label className='switchControlLeftText' onClick={this.onClick} data-l10n-id={this.props.leftl10nId} /></div></div>
         : (this.props.leftl10nId
-          ? <span className='switchControlLeftText' data-l10n-id={this.props.leftl10nId} />
+          ? <label className='switchControlLeftText' onClick={this.onClick} data-l10n-id={this.props.leftl10nId} />
           : null)
       }
       <div className='switchMiddle'>
         {
           this.props.topl10nId
-          ? <span className={cx({
+          ? <label className={cx({
             switchControlTopText: true,
             [this.props.customTopTextClassName]: !!this.props.customTopTextClassName
           })}
+            onClick={this.onClick}
             data-l10n-id={this.props.topl10nId} />
           : null
         }
@@ -67,34 +68,36 @@ class SwitchControl extends ImmutableComponent {
         ? <div className='switchControlText'>
           <div className='switchControlRightText'>
             <div className='switchSpacer'>&nbsp;</div>
-            <span className={cx({
+            <label className={cx({
               switchControlRightText: true,
               [this.props.customRightTextClassName]: !!this.props.customRightTextClassName
             })}
+              onClick={this.onClick}
               data-l10n-id={this.props.rightl10nId}
               data-l10n-args={this.props.rightl10nArgs}
-            >{this.props.rightText || ''}</span>
+            >{this.props.rightText || ''}</label>
           </div>
         </div>
         : <div className='switchControlRight'>
           {
             (this.props.rightl10nId || this.props.rightText) && !this.props.onInfoClick
-            ? <span className={cx({
+            ? <label className={cx({
               switchControlRightText: true,
               [this.props.customRightTextClassName]: !!this.props.customRightTextClassName
             })}
+              onClick={this.onClick}
               data-l10n-id={this.props.rightl10nId}
               data-l10n-args={this.props.rightl10nArgs}
-            >{this.props.rightText || ''}</span>
+            >{this.props.rightText || ''}</label>
           : null
         }
           {
             (this.props.rightl10nId || this.props.rightText) && this.props.onInfoClick
             ? <div className='switchControlRightText'>
-              <span data-l10n-id={this.props.rightl10nId}
+              <label onClick={this.onClick} data-l10n-id={this.props.rightl10nId}
                 data-l10n-args={this.props.rightl10nArgs}>
                 {this.props.rightText}
-              </span>
+              </label>
               <span className={cx({
                 fa: true,
                 'fa-question-circle': true,