Fix KRadioButton autofocus on dynamic rendering

[AlexVelezLl]

Description

Add autofocus directive on KRadioButton to fix autofocus behavior on dynamic rendering.

Issue addressed

Closes #489

Before/after screenshots

Before

Compartir.pantalla.-.2023-11-16.09_06_25.mp4

After

Compartir.pantalla.-.2023-11-23.11_42_57.mp4

Changelog

• #492
  • Description: Add autofocus directive on KRadioButton to fix autofocus behavior on dynamic rendering.
  • Products impact: Kolibri's Setup Wizard
  • Addresses: KRadioButton autofocus not working on dynamic rendering #489
  • Components: KRadioButton
  • Breaking: no
  • Impacts a11y: yes
  • Guidance: Add "autofocus" prop on KRadioButton. This change improves keyboard navigation on forms where a KRadioButton jumps into the DOM.

Steps to test

1. Simulate a flow where a KRadioButton is dynamically rendered (for example, the steps on the setup wizard).
2. Add the property "autofocus" to KRadioButton.
3. The KRadioButton input should be focused when it appears in the DOM.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?

After review

• The changelog item has been pasted to the CHANGELOG.md

[MisRob]

Thank you @AlexVelezLl. good work! Code seems to be fine. Just left one minor note about the changelog. I tested manually and confirm it works.

Is there a corresponding issue in Kolibri in which scope we would introduce this?

[MisRob]

Could you please change this to "bugfix"? This is not as much about the place it fixes, but rather a general category. There are some examples in the PR template you can choose from.

[AlexVelezLl]

Oh, hadn't noticed that. Thanks!

[MisRob]

Nice, thanks!

[MisRob]

Also, one note on the process, after we merge a KDS PR, it is customary to update KDS version on Kolibri's develop branch (but not on the release branch) to the latest KDS commit

[AlexVelezLl]

Yes, it should help address the issue Kolibri#11458, I already added the autofocus props in the PR Kolibri#11537.

[MisRob]

Yes, it should help address the issue learningequality/kolibri#11458, I already added the autofocus props in the PR learningequality/kolibri#11537.

Ah great, in that case you can install this KDS version in your existing Kolibri PR. Let me know if you needed help.