KCheckbox: render the default slot content in <label>

[MisRob]

Actual behavior

Content that is passed through the default slot of KCheckbox

kolibri-design-system/lib/KCheckbox.vue

Lines 46 to 54 in 37dcf4f

	<div
	v-if="$slots.default"
	class="k-checkbox-label"
	>
	<slot></slot>
	<div v-if="description" class="description">
	{{ description }}
	</div>
	</div>

is pretending to behave like a label thanks to our custom styles

kolibri-design-system/lib/KCheckbox.vue

Line 238 in 37dcf4f

cursor: pointer;

However, in this case, no <label> element is rendered. This is insufficient for assistive technologies.

(In some situations, this can be resolved by using KCheckbox'es label property rather than the default slot, however that's not possible in more complex use-cases when we need to pass down another component via slot rather than plain text)

Expected behavior

• KCheckbox renders the default slot's content in the <label for=...>

User-facing consequences

Proper labels are one of the most important things for checkboxes in regards to a11y.

[MisRob]

Addressed by #351