Why doesn't pressing the spacebar whilst a `label` has focus check radio button in `[for=""]` attr?

Label elements are not intended to receive the keyboard focus.

So simply remove the tabindex attribute and you will be able to check the radio control with the space bar when this control is focused.

If you want to control the visual aspect of a label associated to the input, you can change your CSS to:

input:focus + label {
  outline: 1px dotted red;
}

The problem with the approach of having the user press the spacebar on the label, (apart from the fact that it doesn't work!) is that it's not natural behaviour to do that, so keyboard users just won't do it.

If you're replacing checkboxes with a JavaScript driven equivalent, what you should be doing is making your replacement element behave like a checkbox. In other words, allow it to receive tab focus and also have it toggle checked state when the spacebar is pressed on it. Leave the label to just being a label.