diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f9bbad67..d79aa32a6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue index a32d0ece3..be0d5eb16 100644 --- a/lib/KRadioButton.vue +++ b/lib/KRadioButton.vue @@ -10,12 +10,12 @@ + const autofocus = { + inserted(el, { value }) { + if (value) { + el.focus(); + } + }, + }; + /** * Used to display all options */ export default { name: 'KRadioButton', + directives: { + autofocus, + }, model: { prop: 'currentValue', },