Merge pull request #492 from AlexVelezLl/kradio-fix-autofocus

Fix KRadioButton autofocus on dynamic rendering

CHANGELOG.md

@@ -7,6 +7,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 2.0.0
 
+- [#492]
+  - **Description:** Add autofocus directive on KRadioButton to fix autofocus behavior on dynamic rendering.
+  - **Products impact:** bugfix
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/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.
+
+[#492]: https://github.com/learningequality/kolibri-design-system/pull/492
+
 - [#497]
   - **Description:** KDropdownMenu now emits a @tab event when the user hits the [Tab] key and a @close event when the menu is closed programmatically. Additionally, a new icon for Expand All was added and can be used just like any other icon with the "expandAll" name.
   - **Products impact:** updated API
@@ -40,7 +51,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
   [#478]: https://github.com/learningequality/kolibri-design-system/pull/478
 
-  - [#482]
+- [#482]
   - **Description:** Changed develop branch to main branch in Readme
   - **Products impact:** -
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/479

lib/KRadioButton.vue

@@ -10,12 +10,12 @@
         <input
           :id="id"
           ref="input"
+          v-autofocus="autofocus"
           type="radio"
           class="k-radio-button-input"
           :checked="isChecked"
           :value="value"
           :disabled="disabled"
-          :autofocus="autofocus"
           @click.stop="toggleCheck"
           @focus="active = true"
           @blur="blur"
@@ -70,11 +70,22 @@
 
 <script>
 
+  const autofocus = {
+    inserted(el, { value }) {
+      if (value) {
+        el.focus();
+      }
+    },
+  };
+
   /**
    * Used to display all options
    */
   export default {
     name: 'KRadioButton',
+    directives: {
+      autofocus,
+    },
     model: {
       prop: 'currentValue',
     },