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
commented
2 years ago
Actual behavior
Content that is passed through the default slot of
KCheckboxhttps://github.com/learningequality/kolibri-design-system/blob/37dcf4f8db24d0afc5a72586bb35771dd29c8b1d/lib/KCheckbox.vue#L46-L54
is pretending to behave like a label thanks to our custom styles
https://github.com/learningequality/kolibri-design-system/blob/37dcf4f8db24d0afc5a72586bb35771dd29c8b1d/lib/KCheckbox.vue#L238
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'eslabelproperty 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
KCheckboxrenders 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.