Switch using aria-labelledby not working

[MichaelLiss]

Hi,

I like the switch but I cannot figure out how to stop the switch from switching when the user clicks on the label

Note

I have left out all of the handlers and state functionality... that all works...

How Used

This is where the switch is used:

  render() {
     let  Content = ( 
      <div>
        {switch_isProcessing}
      </div> 
      );

    return (
      <div className="garminRegister">
        <div className="container">
          {Content}
        </div>
      </div>
    );
}

Current Definition

This is how I currently define the label, which, when I click on "Process Garmin data" the switch moves.

    let switch_isProcessing = (
      <div className="rowC">

        <label>
          <span className="rightSpace">Process Garmin data</span>
          <Switch 
            onChange={value => this.handleChange('isProcessing', value)} 
            checked={isProcessing} 
            id="isProcessing-switch"
            className="react-switch"

            onColor="#b9721b"
            onHandleColor="#50be55"
            handleDiameter={30}
            uncheckedIcon={<div>Off</div>}
            checkedIcon={
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  height: "100%",
                  fontSize: 15,
                  color: "bisque",
                  paddingRight: 2
                }}
              >
                On
              </div>}
            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
            height={25}
            width={50}
            />
        </label>

      </div>
    );   

Attempts

I am progressively moving the ID to a parent

Try 1

First attempt

    let switch_isProcessing = (
      <div className="rowC">

        <label>
          <span id="neat-label" className="rightSpace">Process Garmin data</span>
          <Switch 
            onChange={value => this.handleChange('isProcessing', value)} 
            checked={isProcessing} 
            id="isProcessing-switch"
            aria-labelledby="neat-label"
            className="react-switch"

            onColor="#b9721b"
            onHandleColor="#50be55"
            handleDiameter={30}
            uncheckedIcon={<div>Off</div>}
            checkedIcon={
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  height: "100%",
                  fontSize: 15,
                  color: "bisque",
                  paddingRight: 2
                }}
              >
                On
              </div>}
            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
            height={25}
            width={50}
            />
        </label>

      </div>
    );   

Try 2

    let switch_isProcessing = (
      <div className="rowC">

        <label id="neat-label">
          <span className="rightSpace">Process Garmin data</span>
          <Switch 
            onChange={value => this.handleChange('isProcessing', value)} 
            checked={isProcessing} 
            id="isProcessing-switch"
            aria-labelledby="neat-label"
            className="react-switch"

            onColor="#b9721b"
            onHandleColor="#50be55"
            handleDiameter={30}
            uncheckedIcon={<div>Off</div>}
            checkedIcon={
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  height: "100%",
                  fontSize: 15,
                  color: "bisque",
                  paddingRight: 2
                }}
              >
                On
              </div>}
            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
            height={25}
            width={50}
            />
        </label>

      </div>
    );   

Try 3

    let switch_isProcessing = (
      <div id="neat-label" className="rowC">

        <label>
          <span className="rightSpace">Process Garmin data</span>
          <Switch 
            onChange={value => this.handleChange('isProcessing', value)} 
            checked={isProcessing} 
            id="isProcessing-switch"
            aria-labelledby="neat-label"
            className="react-switch"

            onColor="#b9721b"
            onHandleColor="#50be55"
            handleDiameter={30}
            uncheckedIcon={<div>Off</div>}
            checkedIcon={
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  height: "100%",
                  fontSize: 15,
                  color: "bisque",
                  paddingRight: 2
                }}
              >
                On
              </div>}
            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
            height={25}
            width={50}
            />
        </label>

      </div>
    );  

[MichaelLiss]

Any help on this?

[markusenglund]

Probably too late, but there are lots of examples in the demo (check out "Switch using aria-labelledby"). The key is to not use a label-tag.