[KSwitch]: Add ariaLabelledBy prop

[AlexVelezLl]

Product

Kolibri

Related: learningequality/kolibri#12743

Desired behavior

In some ocasions we want to have the switch input and its label with a different layout that wouldnt be possible to achieve with the current label prop. For example:

And for these cases we should have an aria-labelledby attribute in the input element, and this pointing to the element that has the desired label for the switch. So we should add a new prop to KSwitch named ariaLabelledBy that sets the aria-labelledby attribute of this input element.

Current behavior

Currently we have a label prop/slot, but this is not enough for more complex layouts.

The Value Add

Improved accessibility.

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue!

[Sahil-Sinha-11]

Hey @AlexVelezLl I would like to work on this issue.

[AlexVelezLl]

Hey @Sahil-Sinha-11! For sure! I will assign this issue to you :)

[Sahil-Sinha-11]

Hey @AlexVelezLl I added the id and arialabelledBy here

passed it as aprop

and genrated the id here

It gives some error, is this the right way to do it?

[AlexVelezLl]

Hey @Sahil-Sinha-11! No, this aria-labelledBy is for cases where we will not be using the label that is rendered by the KSwitch but rather by an external component. So we dont need to implement a labelId computed prop, nor setting this value to the label or any div tag. We just need to set the aria-labelledby input attribute to the new prop ariaLabelledBy.

So we rather should do:

  <input
    ...
    :aria-labelledby="ariaLabelledBy"
  />

[Sahil-Sinha-11]

Thanks for the guidance @AlexVelezLl.
Should it be done this way?

[AlexVelezLl]

Yes! @Sahil-Sinha-11

[Sahil-Sinha-11]

Hey @AlexVelezLl I made a pr.

[AlexVelezLl]

Thank you @Sahil-Sinha-11! Will review it soon 🤗.

[AlexVelezLl]

Closed by #808