Toggle button labels do not toggle the button

[jrenee42]

when you have toggle buttons like:

you expect that clicking on the "Vertical" label will activate the vertical toggle/radio button and turn off the Horizontal button.
that doesn't work.

it is because of custom onClick handlers in the toggle implementation that this doesn't work; so switching the onClick handler to encompass the entire component to fix this.

worked on this with @mavarius
example code for the screenshot above; note that VERTICAL and HORIZONTAL are string constants

<FlexBox
  direction={FlexDirection.Column}
  margin={ComponentSize.Large}
  alignItems={AlignItems.FlexStart}
  style={{marginBottom: 12}}
 >
  <p>Legend Orientation</p>
     <Toggle
       tabIndex={1}
       value="horizontal"
       id="horizontal-legend-orientation"
       name="horizontal"
       checked={legendOrientation === HORIZONTAL}
       onChange={() => handleSetOrientation(HORIZONTAL)}
       type={InputToggleType.Radio}
       size={ComponentSize.ExtraSmall}
       color={ComponentColor['Primary']}
       appearance={Appearance['Outline']}
     >

    <InputLabel
      active={legendOrientation === 'horizontal'}
      htmlFor="horizontal-legend-orientation"
    >
      Horizontal
    </InputLabel>
  </Toggle>
  <Toggle
    tabIndex={2}
    value="vertical"
    id="vertical-legend-orientation"
    name="vertical"
    checked={legendOrientation === VERTICAL}
    onChange={() => handleSetOrientation(VERTICAL)}
    type={InputToggleType.Radio}
    size={ComponentSize.ExtraSmall}
    color={ComponentColor['Primary']}
    appearance={Appearance['Outline']}
  >
    <InputLabel
      active={legendOrientation === 'vertical'}
      htmlFor="vertical-legend-orientation"
    >
      Vertical
    </InputLabel>
  </Toggle>
</FlexBox>`