From dd6a483cccaadc077536c5c9dc4b759670e7a2e1 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Mon, 3 Jun 2024 15:37:46 +0530
Subject: [PATCH 01/21] Add new KRadioButtonGroup Component

- This component enables focus movenment on radio buttons with arrow keys on firefox
---
 lib/KRadioButtonGroup.vue | 114 ++++++++++++++++++++++++++++++++++++++
 lib/KThemePlugin.js       |   2 +
 2 files changed, 116 insertions(+)
 create mode 100644 lib/KRadioButtonGroup.vue

diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
new file mode 100644
index 000000000..b5c2f3ca6
--- /dev/null
+++ b/lib/KRadioButtonGroup.vue
@@ -0,0 +1,114 @@
+<template>
+
+  <div class="k-radio-button-group">
+    <slot></slot>
+  </div>
+
+</template>
+
+<script>
+
+  export default {
+    name: 'KRadioButtonGroup',
+    props: {
+      enable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data() {
+      return {
+        radioButtons: [],
+        focusedRadioIdx: 0,
+        firstRadioIdx: 0,
+        lastRadioIdx: 0,
+      };
+    },
+    computed: {
+      isFirefox() {
+        return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+      },
+    },
+    watch: {
+      // To focus on the first radio button when radio group enables again
+      enable(newVal, oldVal) {
+        if (newVal && !oldVal && this.radioButtons.length > 0) {
+          this.setChecked(0);
+          this.focusedRadioIdx = 0;
+        }
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        if (this.isFirefox) {
+          this.$children.forEach((radioBtn, index) => {
+            this.radioButtons.push(radioBtn);
+            radioBtn.$el.addEventListener('keydown', this.onKeyDown);
+            radioBtn.setTabIndex(-1);
+            radioBtn.$on('input', () => {
+              this.handleInputChange(index);
+            });
+          });
+          this.lastRadioIdx = this.radioButtons.length - 1;
+          this.radioButtons[this.focusedRadioIdx].setTabIndex(0);
+        }
+      });
+    },
+    beforeDestroy() {
+      for (let radioBtn in this.radioButtons) {
+        radioBtn.$el.removeEventListener('keydown', this.onKeyDown);
+      }
+    },
+    methods: {
+      handleInputChange(idx) {
+        if (this.isFirefox) {
+          this.setChecked(idx);
+          this.focusedRadioIdx = idx;
+        }
+      },
+      onKeyDown(event) {
+        const handlers = {
+          ArrowLeft: this.focusPreviousRadio,
+          ArrowRight: this.focusNextRadio,
+          ArrowUp: this.focusPreviousRadio,
+          ArrowDown: this.focusNextRadio,
+        };
+        const handler = handlers[event.key];
+        if (handler) {
+          event.preventDefault();
+          event.stopPropagation();
+          handler(event);
+        }
+      },
+      focusPreviousRadio(event) {
+        let newFocusedRadioIdx =
+          this.focusedRadioIdx === this.firstRadioIdx
+            ? this.lastRadioIdx
+            : this.focusedRadioIdx - 1;
+        this.focusRadio(newFocusedRadioIdx, event);
+      },
+      focusNextRadio(event) {
+        const newFocusedRadioIdx =
+          this.focusedRadioIdx === this.lastRadioIdx
+            ? this.firstRadioIdx
+            : this.focusedRadioIdx + 1;
+        this.focusRadio(newFocusedRadioIdx, event);
+      },
+      setChecked(radioIdx) {
+        for (let i = 0; i < this.radioButtons.length; i++) {
+          const radioBtn = this.radioButtons[i];
+          radioBtn.setTabIndex(-1);
+        }
+        this.radioButtons[radioIdx].setTabIndex(0);
+      },
+      focusRadio(radioIdx, event) {
+        if (radioIdx !== undefined && radioIdx !== null) {
+          this.setChecked(radioIdx);
+          this.focusedRadioIdx = radioIdx;
+          this.radioButtons[radioIdx].toggleCheck(event);
+        }
+      },
+    },
+  };
+
+</script>
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 9e189f875..0b18c6652 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -34,6 +34,7 @@ import KTooltip from './KTooltip';
 import KTransition from './KTransition';
 import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
+import KRadioButtonGroup from './KRadioButtonGroup.vue';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -127,4 +128,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTooltip', KTooltip);
   Vue.component('KTransition', KTransition);
   Vue.component('KTextTruncator', KTextTruncator);
+  Vue.component('KRadioButtonGroup', KRadioButtonGroup);
 }

From ea5a9f13713128408229b3a52f4f7227e26448c3 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Mon, 3 Jun 2024 16:24:22 +0530
Subject: [PATCH 02/21] Add setTabIndex method to set tab index on each radio
 component

---
 lib/KRadioButton.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index f83a4519d..414c2f89d 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -8,6 +8,7 @@
           ref="input"
           v-autofocus="autofocus"
           type="radio"
+          :tabindex="tabIndex"
           class="k-radio-button-input"
           :checked="isChecked"
           :value="buttonValue !== null ? buttonValue : value"
@@ -148,6 +149,7 @@
     },
     data: () => ({
       active: false,
+      tabIndex: 0,
     }),
     computed: {
       isChecked() {
@@ -220,6 +222,12 @@
          */
         this.$emit('blur');
       },
+      /**
+       * @public
+       */
+      setTabIndex(val) {
+        this.tabIndex = val;
+      },
     },
   };
 

From 6100a156f44aedaa436fcac639d2c045910cfda5 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 4 Jun 2024 15:26:21 +0530
Subject: [PATCH 03/21] Add test for KRadioButtonGroup component

---
 lib/__tests__/KRadioButtonGroup.spec.js | 96 +++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 lib/__tests__/KRadioButtonGroup.spec.js

diff --git a/lib/__tests__/KRadioButtonGroup.spec.js b/lib/__tests__/KRadioButtonGroup.spec.js
new file mode 100644
index 000000000..0aea127ba
--- /dev/null
+++ b/lib/__tests__/KRadioButtonGroup.spec.js
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils';
+import KRadioButtonGroup from '../KRadioButtonGroup.vue';
+import KRadioButton from '../KRadioButton.vue';
+
+describe('KRadioButtonGroup component', () => {
+  beforeEach(() => {
+    // Mocked the userAgent because KRadioButtionGroup implements roving tabIndex only for firefox
+    // So these tests are testing for firefox client only
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value: 'mozilla/5.0 (x11; ubuntu; linux x86_64; rv:126.0) gecko/20100101 firefox/126.0',
+      writable: true,
+    });
+  });
+  describe('slot', () => {
+    it('renders two KRadioButton', () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+          ],
+        },
+      });
+      expect(wrapper.findAllComponents(KRadioButton).length).toBe(2);
+    });
+  });
+  describe('Behavior Tests', () => {
+    it('handles keyboard navigation (focus previous/next radio)', async () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+          ],
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      const radioButtons = wrapper.findAllComponents(KRadioButton);
+      expect(radioButtons.length).toBe(2);
+
+      await radioButtons.at(0).trigger('keydown', { key: 'ArrowDown' });
+      expect(wrapper.vm.focusedRadioIdx).toBe(1);
+      expect(radioButtons.at(0).vm.tabIndex).toBe(-1);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(0);
+
+      await radioButtons.at(1).trigger('keydown', { key: 'ArrowUp' });
+      expect(wrapper.vm.focusedRadioIdx).toBe(0);
+      expect(radioButtons.at(0).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+    });
+    it('handles click on radio correctly', async () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+            '<KRadioButton label="Option C" buttonValue="val-c" />',
+          ],
+        },
+      });
+      await wrapper.vm.$nextTick();
+      const radioButtons = wrapper.findAllComponents(KRadioButton);
+      await radioButtons.at(2).trigger('click');
+      expect(wrapper.vm.focusedRadioIdx).toBe(2);
+      expect(radioButtons.at(2).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+    });
+    it('handles enabling and disabling correctly', async () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        props: {
+          enable: true,
+        },
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+            '<KRadioButton label="Option C" buttonValue="val-c" />',
+          ],
+        },
+      });
+      await wrapper.vm.$nextTick();
+      const radioButtons = wrapper.findAllComponents(KRadioButton);
+      await radioButtons.at(2).trigger('click');
+      expect(wrapper.vm.focusedRadioIdx).toBe(2);
+      expect(radioButtons.at(2).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+
+      await wrapper.setProps({ enable: false });
+      await wrapper.setProps({ enable: true });
+      expect(wrapper.vm.focusedRadioIdx).toBe(0);
+      expect(radioButtons.at(0).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+    });
+  });
+});

From eb9c801dbe9abf742e564c78fd81bf01f9200003 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 4 Jun 2024 16:10:42 +0530
Subject: [PATCH 04/21] Add docs for KRadioButtonGroup

- Add KRadioButton method description
- Add KRadioButtonGroup slot and props description
---
 docs/pages/kradiobuttongroup.vue | 55 ++++++++++++++++++++++++++++++++
 lib/KRadioButton.vue             |  1 +
 lib/KRadioButtonGroup.vue        |  5 +++
 3 files changed, 61 insertions(+)
 create mode 100644 docs/pages/kradiobuttongroup.vue

diff --git a/docs/pages/kradiobuttongroup.vue b/docs/pages/kradiobuttongroup.vue
new file mode 100644
index 000000000..1c6ede41c
--- /dev/null
+++ b/docs/pages/kradiobuttongroup.vue
@@ -0,0 +1,55 @@
+
+<template>
+
+  <DocsPageTemplate :apiDocs="true">
+
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        Allows movement between radio buttons inside a radio group using arrow keys in FireFox.
+      </p>
+      <DocsShow>
+        <KRadioButtonGroup>
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option A"
+            value="val-a"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option B"
+            value="val-b"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option C"
+            description="This one is special!"
+            buttonValue="val-c"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Truncated label. Adjusting your browser window size to see this in action."
+            buttonValue="val-d"
+            truncateLabel
+          />
+        </KRadioButtonGroup>
+        <p>
+          Current value: {{ exampleValue }}
+        </p>
+      </DocsShow>
+    </DocsPageSection>
+
+  </DocsPageTemplate>
+
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        exampleValue: 'val-b',
+      };
+    },
+  };
+
+</script>
diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index 414c2f89d..b4cc2d8aa 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -224,6 +224,7 @@
       },
       /**
        * @public
+       * Set the tabIndex value
        */
       setTabIndex(val) {
         this.tabIndex = val;
diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index b5c2f3ca6..279cc8631 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div class="k-radio-button-group">
+    <!-- @slot To render the KRadioButtons -->
     <slot></slot>
   </div>
 
@@ -11,6 +12,10 @@
   export default {
     name: 'KRadioButtonGroup',
     props: {
+      /**
+       * Specifies whether the radio button group is enabled or disabled.
+       * Used to make the first radio button active when the radio group becomes enabled again after being disabled.
+       */
       enable: {
         type: Boolean,
         default: true,

From fddf31ef432a830b8e569bd7dc63fc6f03956d9b Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 4 Jun 2024 16:12:12 +0530
Subject: [PATCH 05/21] Update tableOfContents

---
 docs/tableOfContents.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index c6aa32e34..a27e19085 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -396,6 +396,11 @@ export default [
         title: 'KListWithOverflow',
         isCode: true,
       }),
+      new Page({
+        path: '/kradiobuttongroup',
+        title: 'KRadioButtonGroup',
+        isCode: true,
+      }),
     ],
   }),
 ];

From 4b0688a6e738a49642ff1663ca51ab5aa5d4ed86 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Mon, 3 Jun 2024 15:37:46 +0530
Subject: [PATCH 06/21] Add new KRadioButtonGroup Component

- This component enables focus movenment on radio buttons with arrow keys on firefox
---
 lib/KRadioButtonGroup.vue | 114 ++++++++++++++++++++++++++++++++++++++
 lib/KThemePlugin.js       |   2 +
 2 files changed, 116 insertions(+)
 create mode 100644 lib/KRadioButtonGroup.vue

diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
new file mode 100644
index 000000000..b5c2f3ca6
--- /dev/null
+++ b/lib/KRadioButtonGroup.vue
@@ -0,0 +1,114 @@
+<template>
+
+  <div class="k-radio-button-group">
+    <slot></slot>
+  </div>
+
+</template>
+
+<script>
+
+  export default {
+    name: 'KRadioButtonGroup',
+    props: {
+      enable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data() {
+      return {
+        radioButtons: [],
+        focusedRadioIdx: 0,
+        firstRadioIdx: 0,
+        lastRadioIdx: 0,
+      };
+    },
+    computed: {
+      isFirefox() {
+        return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+      },
+    },
+    watch: {
+      // To focus on the first radio button when radio group enables again
+      enable(newVal, oldVal) {
+        if (newVal && !oldVal && this.radioButtons.length > 0) {
+          this.setChecked(0);
+          this.focusedRadioIdx = 0;
+        }
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        if (this.isFirefox) {
+          this.$children.forEach((radioBtn, index) => {
+            this.radioButtons.push(radioBtn);
+            radioBtn.$el.addEventListener('keydown', this.onKeyDown);
+            radioBtn.setTabIndex(-1);
+            radioBtn.$on('input', () => {
+              this.handleInputChange(index);
+            });
+          });
+          this.lastRadioIdx = this.radioButtons.length - 1;
+          this.radioButtons[this.focusedRadioIdx].setTabIndex(0);
+        }
+      });
+    },
+    beforeDestroy() {
+      for (let radioBtn in this.radioButtons) {
+        radioBtn.$el.removeEventListener('keydown', this.onKeyDown);
+      }
+    },
+    methods: {
+      handleInputChange(idx) {
+        if (this.isFirefox) {
+          this.setChecked(idx);
+          this.focusedRadioIdx = idx;
+        }
+      },
+      onKeyDown(event) {
+        const handlers = {
+          ArrowLeft: this.focusPreviousRadio,
+          ArrowRight: this.focusNextRadio,
+          ArrowUp: this.focusPreviousRadio,
+          ArrowDown: this.focusNextRadio,
+        };
+        const handler = handlers[event.key];
+        if (handler) {
+          event.preventDefault();
+          event.stopPropagation();
+          handler(event);
+        }
+      },
+      focusPreviousRadio(event) {
+        let newFocusedRadioIdx =
+          this.focusedRadioIdx === this.firstRadioIdx
+            ? this.lastRadioIdx
+            : this.focusedRadioIdx - 1;
+        this.focusRadio(newFocusedRadioIdx, event);
+      },
+      focusNextRadio(event) {
+        const newFocusedRadioIdx =
+          this.focusedRadioIdx === this.lastRadioIdx
+            ? this.firstRadioIdx
+            : this.focusedRadioIdx + 1;
+        this.focusRadio(newFocusedRadioIdx, event);
+      },
+      setChecked(radioIdx) {
+        for (let i = 0; i < this.radioButtons.length; i++) {
+          const radioBtn = this.radioButtons[i];
+          radioBtn.setTabIndex(-1);
+        }
+        this.radioButtons[radioIdx].setTabIndex(0);
+      },
+      focusRadio(radioIdx, event) {
+        if (radioIdx !== undefined && radioIdx !== null) {
+          this.setChecked(radioIdx);
+          this.focusedRadioIdx = radioIdx;
+          this.radioButtons[radioIdx].toggleCheck(event);
+        }
+      },
+    },
+  };
+
+</script>
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 9e189f875..0b18c6652 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -34,6 +34,7 @@ import KTooltip from './KTooltip';
 import KTransition from './KTransition';
 import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
+import KRadioButtonGroup from './KRadioButtonGroup.vue';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -127,4 +128,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTooltip', KTooltip);
   Vue.component('KTransition', KTransition);
   Vue.component('KTextTruncator', KTextTruncator);
+  Vue.component('KRadioButtonGroup', KRadioButtonGroup);
 }

From 87a392811968f9fe432d8ae32fbca6d3424705ae Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Mon, 3 Jun 2024 16:24:22 +0530
Subject: [PATCH 07/21] Add setTabIndex method to set tab index on each radio
 component

---
 lib/KRadioButton.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index f83a4519d..414c2f89d 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -8,6 +8,7 @@
           ref="input"
           v-autofocus="autofocus"
           type="radio"
+          :tabindex="tabIndex"
           class="k-radio-button-input"
           :checked="isChecked"
           :value="buttonValue !== null ? buttonValue : value"
@@ -148,6 +149,7 @@
     },
     data: () => ({
       active: false,
+      tabIndex: 0,
     }),
     computed: {
       isChecked() {
@@ -220,6 +222,12 @@
          */
         this.$emit('blur');
       },
+      /**
+       * @public
+       */
+      setTabIndex(val) {
+        this.tabIndex = val;
+      },
     },
   };
 

From ebaf9cb7feacebd0a34762789cd53732acee29d5 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 4 Jun 2024 15:26:21 +0530
Subject: [PATCH 08/21] Add test for KRadioButtonGroup component

---
 lib/__tests__/KRadioButtonGroup.spec.js | 96 +++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 lib/__tests__/KRadioButtonGroup.spec.js

diff --git a/lib/__tests__/KRadioButtonGroup.spec.js b/lib/__tests__/KRadioButtonGroup.spec.js
new file mode 100644
index 000000000..0aea127ba
--- /dev/null
+++ b/lib/__tests__/KRadioButtonGroup.spec.js
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils';
+import KRadioButtonGroup from '../KRadioButtonGroup.vue';
+import KRadioButton from '../KRadioButton.vue';
+
+describe('KRadioButtonGroup component', () => {
+  beforeEach(() => {
+    // Mocked the userAgent because KRadioButtionGroup implements roving tabIndex only for firefox
+    // So these tests are testing for firefox client only
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value: 'mozilla/5.0 (x11; ubuntu; linux x86_64; rv:126.0) gecko/20100101 firefox/126.0',
+      writable: true,
+    });
+  });
+  describe('slot', () => {
+    it('renders two KRadioButton', () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+          ],
+        },
+      });
+      expect(wrapper.findAllComponents(KRadioButton).length).toBe(2);
+    });
+  });
+  describe('Behavior Tests', () => {
+    it('handles keyboard navigation (focus previous/next radio)', async () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+          ],
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      const radioButtons = wrapper.findAllComponents(KRadioButton);
+      expect(radioButtons.length).toBe(2);
+
+      await radioButtons.at(0).trigger('keydown', { key: 'ArrowDown' });
+      expect(wrapper.vm.focusedRadioIdx).toBe(1);
+      expect(radioButtons.at(0).vm.tabIndex).toBe(-1);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(0);
+
+      await radioButtons.at(1).trigger('keydown', { key: 'ArrowUp' });
+      expect(wrapper.vm.focusedRadioIdx).toBe(0);
+      expect(radioButtons.at(0).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+    });
+    it('handles click on radio correctly', async () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+            '<KRadioButton label="Option C" buttonValue="val-c" />',
+          ],
+        },
+      });
+      await wrapper.vm.$nextTick();
+      const radioButtons = wrapper.findAllComponents(KRadioButton);
+      await radioButtons.at(2).trigger('click');
+      expect(wrapper.vm.focusedRadioIdx).toBe(2);
+      expect(radioButtons.at(2).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+    });
+    it('handles enabling and disabling correctly', async () => {
+      const wrapper = mount(KRadioButtonGroup, {
+        props: {
+          enable: true,
+        },
+        slots: {
+          default: [
+            '<KRadioButton label="Option A" buttonValue="val-a" />',
+            '<KRadioButton label="Option B" buttonValue="val-b" />',
+            '<KRadioButton label="Option C" buttonValue="val-c" />',
+          ],
+        },
+      });
+      await wrapper.vm.$nextTick();
+      const radioButtons = wrapper.findAllComponents(KRadioButton);
+      await radioButtons.at(2).trigger('click');
+      expect(wrapper.vm.focusedRadioIdx).toBe(2);
+      expect(radioButtons.at(2).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+
+      await wrapper.setProps({ enable: false });
+      await wrapper.setProps({ enable: true });
+      expect(wrapper.vm.focusedRadioIdx).toBe(0);
+      expect(radioButtons.at(0).vm.tabIndex).toBe(0);
+      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+    });
+  });
+});

From a8c195153fb6f848359043868550a02e2b3f20e0 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 4 Jun 2024 16:10:42 +0530
Subject: [PATCH 09/21] Add docs for KRadioButtonGroup

- Add KRadioButton method description
- Add KRadioButtonGroup slot and props description
---
 docs/pages/kradiobuttongroup.vue | 55 ++++++++++++++++++++++++++++++++
 lib/KRadioButton.vue             |  1 +
 lib/KRadioButtonGroup.vue        |  5 +++
 3 files changed, 61 insertions(+)
 create mode 100644 docs/pages/kradiobuttongroup.vue

diff --git a/docs/pages/kradiobuttongroup.vue b/docs/pages/kradiobuttongroup.vue
new file mode 100644
index 000000000..1c6ede41c
--- /dev/null
+++ b/docs/pages/kradiobuttongroup.vue
@@ -0,0 +1,55 @@
+
+<template>
+
+  <DocsPageTemplate :apiDocs="true">
+
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        Allows movement between radio buttons inside a radio group using arrow keys in FireFox.
+      </p>
+      <DocsShow>
+        <KRadioButtonGroup>
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option A"
+            value="val-a"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option B"
+            value="val-b"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option C"
+            description="This one is special!"
+            buttonValue="val-c"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Truncated label. Adjusting your browser window size to see this in action."
+            buttonValue="val-d"
+            truncateLabel
+          />
+        </KRadioButtonGroup>
+        <p>
+          Current value: {{ exampleValue }}
+        </p>
+      </DocsShow>
+    </DocsPageSection>
+
+  </DocsPageTemplate>
+
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        exampleValue: 'val-b',
+      };
+    },
+  };
+
+</script>
diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index 414c2f89d..b4cc2d8aa 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -224,6 +224,7 @@
       },
       /**
        * @public
+       * Set the tabIndex value
        */
       setTabIndex(val) {
         this.tabIndex = val;
diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index b5c2f3ca6..279cc8631 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div class="k-radio-button-group">
+    <!-- @slot To render the KRadioButtons -->
     <slot></slot>
   </div>
 
@@ -11,6 +12,10 @@
   export default {
     name: 'KRadioButtonGroup',
     props: {
+      /**
+       * Specifies whether the radio button group is enabled or disabled.
+       * Used to make the first radio button active when the radio group becomes enabled again after being disabled.
+       */
       enable: {
         type: Boolean,
         default: true,

From 3f2d8ead3bdd21a6aae0986b37baffb74a4ad0ca Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 4 Jun 2024 16:12:12 +0530
Subject: [PATCH 10/21] Update tableOfContents

---
 docs/tableOfContents.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index c6aa32e34..a27e19085 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -396,6 +396,11 @@ export default [
         title: 'KListWithOverflow',
         isCode: true,
       }),
+      new Page({
+        path: '/kradiobuttongroup',
+        title: 'KRadioButtonGroup',
+        isCode: true,
+      }),
     ],
   }),
 ];

From b1d09dc00d7a8a5cd3650a9d1fe81e55e49a56c1 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Wed, 19 Jun 2024 14:42:21 +0530
Subject: [PATCH 11/21] Fix: fix tab issue for change language model

---
 lib/KRadioButtonGroup.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index 279cc8631..76880fca1 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -46,16 +46,31 @@
     mounted() {
       this.$nextTick(() => {
         if (this.isFirefox) {
-          this.$children.forEach((radioBtn, index) => {
-            this.radioButtons.push(radioBtn);
-            radioBtn.$el.addEventListener('keydown', this.onKeyDown);
-            radioBtn.setTabIndex(-1);
+          if (this.$children[0]._name === '<KGridItem>') {
+            this.$children.forEach(gridItem => {
+              gridItem.$children.forEach(fixedGridItem => {
+                fixedGridItem.$children.forEach(radioBtn => {
+                  this.radioButtons.push(radioBtn);
+                  radioBtn.$el.addEventListener('keydown', this.onKeyDown);
+                  radioBtn.setTabIndex(-1);
+                });
+              });
+            });
+          } else {
+            this.$children.forEach(radioBtn => {
+              this.radioButtons.push(radioBtn);
+              radioBtn.$el.addEventListener('keydown', this.onKeyDown);
+              radioBtn.setTabIndex(-1);
+            });
+          }
+
+          this.lastRadioIdx = this.radioButtons.length - 1;
+          this.radioButtons[this.focusedRadioIdx].setTabIndex(0);
+          this.radioButtons.forEach((radioBtn, index) => {
             radioBtn.$on('input', () => {
               this.handleInputChange(index);
             });
           });
-          this.lastRadioIdx = this.radioButtons.length - 1;
-          this.radioButtons[this.focusedRadioIdx].setTabIndex(0);
         }
       });
     },
@@ -108,8 +123,6 @@
       },
       focusRadio(radioIdx, event) {
         if (radioIdx !== undefined && radioIdx !== null) {
-          this.setChecked(radioIdx);
-          this.focusedRadioIdx = radioIdx;
           this.radioButtons[radioIdx].toggleCheck(event);
         }
       },

From 29f339adfe27476aa2d886e4651013714d73da5a Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Thu, 20 Jun 2024 11:22:46 +0530
Subject: [PATCH 12/21] Update KRadioButtonGroup component

- Used ._componentTag instead of ._name
- Changed onkeydown with onkeyup listener
---
 lib/KRadioButtonGroup.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index 76880fca1..731753458 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -46,12 +46,12 @@
     mounted() {
       this.$nextTick(() => {
         if (this.isFirefox) {
-          if (this.$children[0]._name === '<KGridItem>') {
+          if (this.$children[0].$options._componentTag === 'KGridItem') {
             this.$children.forEach(gridItem => {
               gridItem.$children.forEach(fixedGridItem => {
                 fixedGridItem.$children.forEach(radioBtn => {
                   this.radioButtons.push(radioBtn);
-                  radioBtn.$el.addEventListener('keydown', this.onKeyDown);
+                  radioBtn.$el.addEventListener('keyup', this.onKeyUp);
                   radioBtn.setTabIndex(-1);
                 });
               });
@@ -59,7 +59,7 @@
           } else {
             this.$children.forEach(radioBtn => {
               this.radioButtons.push(radioBtn);
-              radioBtn.$el.addEventListener('keydown', this.onKeyDown);
+              radioBtn.$el.addEventListener('keyup', this.onKeyUp);
               radioBtn.setTabIndex(-1);
             });
           }
@@ -76,7 +76,7 @@
     },
     beforeDestroy() {
       for (let radioBtn in this.radioButtons) {
-        radioBtn.$el.removeEventListener('keydown', this.onKeyDown);
+        radioBtn.$el.removeEventListener('keyup', this.onKeyUp);
       }
     },
     methods: {
@@ -86,7 +86,7 @@
           this.focusedRadioIdx = idx;
         }
       },
-      onKeyDown(event) {
+      onKeyUp(event) {
         const handlers = {
           ArrowLeft: this.focusPreviousRadio,
           ArrowRight: this.focusNextRadio,

From 73e8e76d560534b523b0d84751dfd226e17c0625 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Wed, 10 Jul 2024 16:23:55 +0530
Subject: [PATCH 13/21] fix lint

---
 lib/KRadioButtonGroup.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index 731753458..5420d6237 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -7,6 +7,7 @@
 
 </template>
 
+
 <script>
 
   export default {

From df58010e9db3af9623aafc0193c21a2c353e24a8 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Wed, 10 Jul 2024 16:41:53 +0530
Subject: [PATCH 14/21] Change keydown event with keyup event

---
 lib/__tests__/KRadioButtonGroup.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/__tests__/KRadioButtonGroup.spec.js b/lib/__tests__/KRadioButtonGroup.spec.js
index 0aea127ba..059511e38 100644
--- a/lib/__tests__/KRadioButtonGroup.spec.js
+++ b/lib/__tests__/KRadioButtonGroup.spec.js
@@ -39,12 +39,12 @@ describe('KRadioButtonGroup component', () => {
       const radioButtons = wrapper.findAllComponents(KRadioButton);
       expect(radioButtons.length).toBe(2);
 
-      await radioButtons.at(0).trigger('keydown', { key: 'ArrowDown' });
+      await radioButtons.at(0).trigger('keyup', { key: 'ArrowDown' });
       expect(wrapper.vm.focusedRadioIdx).toBe(1);
       expect(radioButtons.at(0).vm.tabIndex).toBe(-1);
       expect(radioButtons.at(1).vm.tabIndex).toBe(0);
 
-      await radioButtons.at(1).trigger('keydown', { key: 'ArrowUp' });
+      await radioButtons.at(1).trigger('keyup', { key: 'ArrowUp' });
       expect(wrapper.vm.focusedRadioIdx).toBe(0);
       expect(radioButtons.at(0).vm.tabIndex).toBe(0);
       expect(radioButtons.at(1).vm.tabIndex).toBe(-1);

From 0e9be90ef2c2c5975dcefc11a6be67a9971fe8c3 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Wed, 10 Jul 2024 16:48:17 +0530
Subject: [PATCH 15/21] fix lint

---
 docs/pages/kradiobuttongroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/kradiobuttongroup.vue b/docs/pages/kradiobuttongroup.vue
index 1c6ede41c..bfbafeaa3 100644
--- a/docs/pages/kradiobuttongroup.vue
+++ b/docs/pages/kradiobuttongroup.vue
@@ -1,4 +1,3 @@
-
 <template>
 
   <DocsPageTemplate :apiDocs="true">
@@ -42,6 +41,7 @@
 
 </template>
 
+
 <script>
 
   export default {

From adb42c0bb3b69176d4e0629a885e4323dc5cc0c7 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Wed, 7 Aug 2024 21:37:26 +0530
Subject: [PATCH 16/21] Fix some logics in KRadioButtonGroup, fix tests - Use
 recursion to query all KRadioButton - In test avoid internval variable use

---
 lib/KRadioButton.vue                    |   8 +-
 lib/KRadioButtonGroup.vue               | 107 ++++++++++--------------
 lib/__tests__/KRadioButtonGroup.spec.js |  64 ++++++--------
 3 files changed, 79 insertions(+), 100 deletions(-)

diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index b4cc2d8aa..1851df85e 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -185,6 +185,12 @@
       }
     },
     methods: {
+      /**
+       * Toggles the check state of the radio button.
+       *
+       * @public
+       * @param {Event} event - The event object.
+       */
       toggleCheck(event) {
         if (!this.disabled) {
           this.focus();
@@ -224,7 +230,7 @@
       },
       /**
        * @public
-       * Set the tabIndex value
+       * Sets `tab-index` on input
        */
       setTabIndex(val) {
         this.tabIndex = val;
diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index 5420d6237..fda7654d6 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -12,22 +12,13 @@
 
   export default {
     name: 'KRadioButtonGroup',
-    props: {
-      /**
-       * Specifies whether the radio button group is enabled or disabled.
-       * Used to make the first radio button active when the radio group becomes enabled again after being disabled.
-       */
-      enable: {
-        type: Boolean,
-        default: true,
-      },
-    },
     data() {
       return {
         radioButtons: [],
         focusedRadioIdx: 0,
         firstRadioIdx: 0,
         lastRadioIdx: 0,
+        radioBtnIdx: 0,
       };
     },
     computed: {
@@ -35,51 +26,23 @@
         return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
       },
     },
-    watch: {
-      // To focus on the first radio button when radio group enables again
-      enable(newVal, oldVal) {
-        if (newVal && !oldVal && this.radioButtons.length > 0) {
-          this.setChecked(0);
-          this.focusedRadioIdx = 0;
-        }
-      },
-    },
     mounted() {
+      if (!this.isFirefox) {
+        return;
+      }
       this.$nextTick(() => {
-        if (this.isFirefox) {
-          if (this.$children[0].$options._componentTag === 'KGridItem') {
-            this.$children.forEach(gridItem => {
-              gridItem.$children.forEach(fixedGridItem => {
-                fixedGridItem.$children.forEach(radioBtn => {
-                  this.radioButtons.push(radioBtn);
-                  radioBtn.$el.addEventListener('keyup', this.onKeyUp);
-                  radioBtn.setTabIndex(-1);
-                });
-              });
-            });
-          } else {
-            this.$children.forEach(radioBtn => {
-              this.radioButtons.push(radioBtn);
-              radioBtn.$el.addEventListener('keyup', this.onKeyUp);
-              radioBtn.setTabIndex(-1);
-            });
-          }
+        const KRadioButtonGroupChildren = this.$children;
+        this.queryAndAddRadioBtns(KRadioButtonGroupChildren);
 
-          this.lastRadioIdx = this.radioButtons.length - 1;
-          this.radioButtons[this.focusedRadioIdx].setTabIndex(0);
-          this.radioButtons.forEach((radioBtn, index) => {
-            radioBtn.$on('input', () => {
-              this.handleInputChange(index);
-            });
-          });
-        }
+        this.$el.addEventListener('keyup', this.onKeyUp);
+
+        this.lastRadioIdx = this.radioButtons.length - 1;
+
+        const firstRadioButton = this.radioButtons[this.focusedRadioIdx];
+        firstRadioButton.setTabIndex(0);
       });
     },
-    beforeDestroy() {
-      for (let radioBtn in this.radioButtons) {
-        radioBtn.$el.removeEventListener('keyup', this.onKeyUp);
-      }
-    },
+
     methods: {
       handleInputChange(idx) {
         if (this.isFirefox) {
@@ -87,18 +50,40 @@
           this.focusedRadioIdx = idx;
         }
       },
+      queryAndAddRadioBtns(children) {
+        if (children[0].$options._componentTag === 'KRadioButton') {
+          for (let i = 0; i < children.length; i++) {
+            const radioBtnVueComp = children[i];
+            this.radioButtons.push(radioBtnVueComp);
+            radioBtnVueComp.setTabIndex(-1);
+            (btnIndex => {
+              radioBtnVueComp.$on('input', () => {
+                this.handleInputChange(btnIndex);
+              });
+            })(this.radioBtnIdx);
+
+            this.radioBtnIdx += 1;
+          }
+          return;
+        }
+        this.queryAndAddRadioBtns(children[0].$children);
+        if (children.length > 1) this.queryAndAddRadioBtns(children[1].$children);
+        return;
+      },
       onKeyUp(event) {
-        const handlers = {
-          ArrowLeft: this.focusPreviousRadio,
-          ArrowRight: this.focusNextRadio,
-          ArrowUp: this.focusPreviousRadio,
-          ArrowDown: this.focusNextRadio,
-        };
-        const handler = handlers[event.key];
-        if (handler) {
-          event.preventDefault();
-          event.stopPropagation();
-          handler(event);
+        if (event.target.className === 'k-radio-button-input') {
+          const handlers = {
+            ArrowLeft: this.focusPreviousRadio,
+            ArrowRight: this.focusNextRadio,
+            ArrowUp: this.focusPreviousRadio,
+            ArrowDown: this.focusNextRadio,
+          };
+          const handler = handlers[event.key];
+          if (handler) {
+            event.preventDefault();
+            event.stopPropagation();
+            handler(event);
+          }
         }
       },
       focusPreviousRadio(event) {
diff --git a/lib/__tests__/KRadioButtonGroup.spec.js b/lib/__tests__/KRadioButtonGroup.spec.js
index 059511e38..8b0ab905c 100644
--- a/lib/__tests__/KRadioButtonGroup.spec.js
+++ b/lib/__tests__/KRadioButtonGroup.spec.js
@@ -25,29 +25,36 @@ describe('KRadioButtonGroup component', () => {
     });
   });
   describe('Behavior Tests', () => {
-    it('handles keyboard navigation (focus previous/next radio)', async () => {
+    it('handles keyboard navigation', async () => {
       const wrapper = mount(KRadioButtonGroup, {
         slots: {
           default: [
             '<KRadioButton label="Option A" buttonValue="val-a" />',
             '<KRadioButton label="Option B" buttonValue="val-b" />',
+            '<KRadioButton label="Option C" buttonValue="val-c" />',
           ],
         },
       });
       await wrapper.vm.$nextTick();
 
       const radioButtons = wrapper.findAllComponents(KRadioButton);
-      expect(radioButtons.length).toBe(2);
+      expect(radioButtons.length).toBe(3);
+
+      let firstRadioBtnInputElm = radioButtons.at(0).find('input[type="radio"]');
+      let secondRadioBtnInputElm = radioButtons.at(1).find('input[type="radio"]');
+      let thirdRadioBtnInputElm = radioButtons.at(2).find('input[type="radio"]');
+
+      await firstRadioBtnInputElm.trigger('keyup', { key: 'ArrowDown' });
 
-      await radioButtons.at(0).trigger('keyup', { key: 'ArrowDown' });
-      expect(wrapper.vm.focusedRadioIdx).toBe(1);
-      expect(radioButtons.at(0).vm.tabIndex).toBe(-1);
-      expect(radioButtons.at(1).vm.tabIndex).toBe(0);
+      expect(firstRadioBtnInputElm.attributes('tabindex')).toBe('-1');
+      expect(secondRadioBtnInputElm.attributes('tabindex')).toBe('0');
+      expect(thirdRadioBtnInputElm.attributes('tabindex')).toBe('-1');
 
-      await radioButtons.at(1).trigger('keyup', { key: 'ArrowUp' });
-      expect(wrapper.vm.focusedRadioIdx).toBe(0);
-      expect(radioButtons.at(0).vm.tabIndex).toBe(0);
-      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+      await secondRadioBtnInputElm.trigger('keyup', { key: 'ArrowUp' });
+
+      expect(firstRadioBtnInputElm.attributes('tabindex')).toBe('0');
+      expect(secondRadioBtnInputElm.attributes('tabindex')).toBe('-1');
+      expect(thirdRadioBtnInputElm.attributes('tabindex')).toBe('-1');
     });
     it('handles click on radio correctly', async () => {
       const wrapper = mount(KRadioButtonGroup, {
@@ -58,39 +65,20 @@ describe('KRadioButtonGroup component', () => {
             '<KRadioButton label="Option C" buttonValue="val-c" />',
           ],
         },
+        attachTo: document.body,
       });
       await wrapper.vm.$nextTick();
+
       const radioButtons = wrapper.findAllComponents(KRadioButton);
       await radioButtons.at(2).trigger('click');
-      expect(wrapper.vm.focusedRadioIdx).toBe(2);
-      expect(radioButtons.at(2).vm.tabIndex).toBe(0);
-      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
-    });
-    it('handles enabling and disabling correctly', async () => {
-      const wrapper = mount(KRadioButtonGroup, {
-        props: {
-          enable: true,
-        },
-        slots: {
-          default: [
-            '<KRadioButton label="Option A" buttonValue="val-a" />',
-            '<KRadioButton label="Option B" buttonValue="val-b" />',
-            '<KRadioButton label="Option C" buttonValue="val-c" />',
-          ],
-        },
-      });
-      await wrapper.vm.$nextTick();
-      const radioButtons = wrapper.findAllComponents(KRadioButton);
-      await radioButtons.at(2).trigger('click');
-      expect(wrapper.vm.focusedRadioIdx).toBe(2);
-      expect(radioButtons.at(2).vm.tabIndex).toBe(0);
-      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
 
-      await wrapper.setProps({ enable: false });
-      await wrapper.setProps({ enable: true });
-      expect(wrapper.vm.focusedRadioIdx).toBe(0);
-      expect(radioButtons.at(0).vm.tabIndex).toBe(0);
-      expect(radioButtons.at(1).vm.tabIndex).toBe(-1);
+      const firstRadioBtnInputElm = radioButtons.at(0).find('input[type="radio"]');
+      const secondRadioBtnInputElm = radioButtons.at(1).find('input[type="radio"]');
+      const thirdRadioBtnInputElm = radioButtons.at(2).find('input[type="radio"]');
+
+      expect(firstRadioBtnInputElm.attributes('tabindex')).toBe('-1');
+      expect(secondRadioBtnInputElm.attributes('tabindex')).toBe('-1');
+      expect(thirdRadioBtnInputElm.attributes('tabindex')).toBe('0');
     });
   });
 });

From 3004607c3807be5e06ff4b4c63b02c30e2d21389 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Sat, 17 Aug 2024 12:39:48 +0530
Subject: [PATCH 17/21] Fix queryAndAddRadioBtns recursive logic and rename
 methods name

---
 lib/KRadioButtonGroup.vue | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index fda7654d6..3bb0eeb41 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -46,14 +46,22 @@
     methods: {
       handleInputChange(idx) {
         if (this.isFirefox) {
-          this.setChecked(idx);
+          this.focusRadio(idx);
           this.focusedRadioIdx = idx;
         }
       },
+      /**
+       * Recursively traverses the children of KRadioButtonGroup to find KRadioButton components.
+       * Sets a tabIndex attribute on each KRadioButton and adds it to an array to enable navigation
+       * between radio buttons using arrow keys in Firefox Browser.
+       *
+       * @param {Array<object>} children - An array of objects where each object represents a child component of KRadioButtonGroup.
+       * @returns {void}
+       */
       queryAndAddRadioBtns(children) {
-        if (children[0].$options._componentTag === 'KRadioButton') {
-          for (let i = 0; i < children.length; i++) {
-            const radioBtnVueComp = children[i];
+        for (const child of children) {
+          if (child.$options._componentTag === 'KRadioButton') {
+            const radioBtnVueComp = child;
             this.radioButtons.push(radioBtnVueComp);
             radioBtnVueComp.setTabIndex(-1);
             (btnIndex => {
@@ -61,13 +69,11 @@
                 this.handleInputChange(btnIndex);
               });
             })(this.radioBtnIdx);
-
             this.radioBtnIdx += 1;
+          } else if (child.$children && Array.isArray(child.$children)) {
+            this.queryAndAddRadioBtns(child.$children);
           }
-          return;
         }
-        this.queryAndAddRadioBtns(children[0].$children);
-        if (children.length > 1) this.queryAndAddRadioBtns(children[1].$children);
         return;
       },
       onKeyUp(event) {
@@ -91,23 +97,23 @@
           this.focusedRadioIdx === this.firstRadioIdx
             ? this.lastRadioIdx
             : this.focusedRadioIdx - 1;
-        this.focusRadio(newFocusedRadioIdx, event);
+        this.setChecked(newFocusedRadioIdx, event);
       },
       focusNextRadio(event) {
         const newFocusedRadioIdx =
           this.focusedRadioIdx === this.lastRadioIdx
             ? this.firstRadioIdx
             : this.focusedRadioIdx + 1;
-        this.focusRadio(newFocusedRadioIdx, event);
+        this.setChecked(newFocusedRadioIdx, event);
       },
-      setChecked(radioIdx) {
+      focusRadio(radioIdx) {
         for (let i = 0; i < this.radioButtons.length; i++) {
           const radioBtn = this.radioButtons[i];
           radioBtn.setTabIndex(-1);
         }
         this.radioButtons[radioIdx].setTabIndex(0);
       },
-      focusRadio(radioIdx, event) {
+      setChecked(radioIdx, event) {
         if (radioIdx !== undefined && radioIdx !== null) {
           this.radioButtons[radioIdx].toggleCheck(event);
         }

From 1fa0a0b11fed1ea58178de7d4a15f0524a58c759 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 21 Aug 2024 21:18:11 +0200
Subject: [PATCH 18/21] Update CHANGELOG.md

---
 CHANGELOG.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd895dc5f..c34e2c6a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,18 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#650]
+  - **Description:** Add `KRadioButtonGroup` component to fix keyboard navigation in radio button groups in Firefox 
+  - **Products impact:** New API
+  - **Addresses:** https://github.com/learningequality/kolibri/issues/10491
+  - **Components:** `KRadioButtonGroup`
+  - **Breaking:** no
+  - **Impacts a11y:** yes
+  - **Guidance:** Make sure that all `KRadioButton`s are wrapped in `KRadioButtonGroup`
+
+[#650]: https://github.com/learningequality/kolibri-design-system/pull/650
+
+
 - [#728]
   - **Description:** Adds `$darken_` utility functions for darkening palette colors and ensures compatibility with Node.js v10 by pinning the `color` package version to `3.2.1`.
   - **Products impact:** Kolibri Design System

From 46566e489beb08df2d2f6f0a2103aeefb232adca Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 21 Aug 2024 21:39:50 +0200
Subject: [PATCH 19/21] Update documentation

---
 docs/pages/kradiobutton.vue      | 96 ++++++++++++++++++++++----------
 docs/pages/kradiobuttongroup.vue | 31 +----------
 lib/KRadioButton.vue             |  4 +-
 lib/KRadioButtonGroup.vue        | 11 +++-
 4 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/docs/pages/kradiobutton.vue b/docs/pages/kradiobutton.vue
index 6926b2cbe..cf9e6d9d8 100644
--- a/docs/pages/kradiobutton.vue
+++ b/docs/pages/kradiobutton.vue
@@ -2,39 +2,70 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        This is a radio button component:
-      </p>
+      <p>A radio button is used to make a single selection from a group of options. Radio buttons should be used instead of checkboxes if only one option can be selected.</p>
+
+      <p><code>KRadioButton</code>'s are always be wrapped in <DocsLibraryLink component="KRadioButtonGroup" />.</p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <DocsShowCode lang="html">
+        <KRadioButtonGroup>
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option A"
+            value="val-a"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option B"
+            value="val-b"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option C"
+            description="This one is special!"
+            buttonValue="val-c"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Truncated label. Adjusting your browser window size to see this in action."
+            buttonValue="val-d"
+            truncateLabel
+          />
+        </KRadioButtonGroup>
+      </DocsShowCode>
+
       <DocsShow>
-        <KRadioButton
-          v-model="exampleValue"
-          label="Option A"
-          value="val-a"
-        />
-        <KRadioButton
-          v-model="exampleValue"
-          label="Option B"
-          value="val-b"
-        />
-        <KRadioButton
-          v-model="exampleValue"
-          label="Option C"
-          description="This one is special!"
-          buttonValue="val-c"
-        />
-        <KRadioButton
-          v-model="exampleValue"
-          label="Truncated label. Adjusting your browser window size to see this in action."
-          buttonValue="val-d"
-          truncateLabel
-        />
+        <KRadioButtonGroup>
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option A"
+            value="val-a"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option B"
+            value="val-b"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Option C"
+            description="This one is special!"
+            buttonValue="val-c"
+          />
+          <KRadioButton
+            v-model="exampleValue"
+            label="Truncated label. Adjusting your browser window size to see this in action."
+            buttonValue="val-d"
+            truncateLabel
+          />
+        </KRadioButtonGroup>
         <p>
           Current value: {{ exampleValue }}
         </p>
       </DocsShow>
-      <p>
-        A radio button is used to make a single selection from a group of options. Radio buttons should be used instead of checkboxes if only one option can be selected.
-      </p>
+
+      </docsshowcode>
     </DocsPageSection>
 
     <DocsPageSection title="Layout" anchor="#layout">
@@ -56,11 +87,20 @@
 
     <DocsPageSection title="Guidelines" anchor="#guidelines">
       <ul>
+        <li>Always wrap <code>KRadioButton</code> group in <DocsLibraryLink component="KRadioButtonGroup" /></li>
         <li>There must always be exactly one radio button selected within a group</li>
         <li>If the user is allowed to not select any of the options, provide a "None" option</li>
         <li>By default, the first radio option is selected, but may be configured to have any option preselected</li>
       </ul>
     </DocsPageSection>
+
+    <DocsPageSection title="Related" anchor="#related">
+      <ul>
+        <li>
+          <DocsLibraryLink component="KRadioButtonGroup" /> ensures <code>KRadioButton</code> groups are accessible in all supported browsers.
+        </li>
+      </ul>
+    </DocsPageSection>
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kradiobuttongroup.vue b/docs/pages/kradiobuttongroup.vue
index bfbafeaa3..a92c95a00 100644
--- a/docs/pages/kradiobuttongroup.vue
+++ b/docs/pages/kradiobuttongroup.vue
@@ -4,37 +4,8 @@
 
     <DocsPageSection title="Overview" anchor="#overview">
       <p>
-        Allows movement between radio buttons inside a radio group using arrow keys in FireFox.
+        Ensures <code>KRadioButton</code> groups are accessible in all supported browsers. Refer to <DocsLibraryLink component="KRadioButton" /> for more.
       </p>
-      <DocsShow>
-        <KRadioButtonGroup>
-          <KRadioButton
-            v-model="exampleValue"
-            label="Option A"
-            value="val-a"
-          />
-          <KRadioButton
-            v-model="exampleValue"
-            label="Option B"
-            value="val-b"
-          />
-          <KRadioButton
-            v-model="exampleValue"
-            label="Option C"
-            description="This one is special!"
-            buttonValue="val-c"
-          />
-          <KRadioButton
-            v-model="exampleValue"
-            label="Truncated label. Adjusting your browser window size to see this in action."
-            buttonValue="val-d"
-            truncateLabel
-          />
-        </KRadioButtonGroup>
-        <p>
-          Current value: {{ exampleValue }}
-        </p>
-      </DocsShow>
     </DocsPageSection>
 
   </DocsPageTemplate>
diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index 1851df85e..ba5a00b01 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -72,7 +72,9 @@
   };
 
   /**
-   * Used to display all options
+   * Used to display radio buttons.
+   *
+   * To be used within `KRadioButtonGroup`.
    */
   export default {
     name: 'KRadioButton',
diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index 3bb0eeb41..d85af39b6 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div class="k-radio-button-group">
-    <!-- @slot To render the KRadioButtons -->
+    <!-- @slot For `KRadioButton`s -->
     <slot></slot>
   </div>
 
@@ -10,6 +10,15 @@
 
 <script>
 
+  /**
+   * Supposed to wrap a `KRadioButton` group.
+   *
+   * Ensures radio button groups are accessible
+   * in all supported browsers by:
+   *   - Allows movement between radio buttons inside
+   *     a radio group using arrow keys in Firefox
+   *     (https://github.com/learningequality/kolibri/issues/10491)
+   */
   export default {
     name: 'KRadioButtonGroup',
     data() {

From 37272a84317b601eabf4a2d532ed8e99a54ddce0 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 21 Aug 2024 21:46:28 +0200
Subject: [PATCH 20/21] Update documentation

---
 docs/pages/kradiobutton.vue      | 16 +++++++---------
 docs/pages/kradiobuttongroup.vue | 13 -------------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/docs/pages/kradiobutton.vue b/docs/pages/kradiobutton.vue
index cf9e6d9d8..36143c46b 100644
--- a/docs/pages/kradiobutton.vue
+++ b/docs/pages/kradiobutton.vue
@@ -8,7 +8,7 @@
     </DocsPageSection>
 
     <DocsPageSection title="Usage" anchor="#usage">
-      <DocsShowCode lang="html">
+      <DocsShow>
         <KRadioButtonGroup>
           <KRadioButton
             v-model="exampleValue"
@@ -33,9 +33,12 @@
             truncateLabel
           />
         </KRadioButtonGroup>
-      </DocsShowCode>
+        <p>
+          Current value: {{ exampleValue }}
+        </p>
+      </DocsShow>
 
-      <DocsShow>
+      <DocsShowCode lang="html">
         <KRadioButtonGroup>
           <KRadioButton
             v-model="exampleValue"
@@ -60,12 +63,7 @@
             truncateLabel
           />
         </KRadioButtonGroup>
-        <p>
-          Current value: {{ exampleValue }}
-        </p>
-      </DocsShow>
-
-      </docsshowcode>
+      </DocsShowCode>
     </DocsPageSection>
 
     <DocsPageSection title="Layout" anchor="#layout">
diff --git a/docs/pages/kradiobuttongroup.vue b/docs/pages/kradiobuttongroup.vue
index a92c95a00..a3c4fe493 100644
--- a/docs/pages/kradiobuttongroup.vue
+++ b/docs/pages/kradiobuttongroup.vue
@@ -11,16 +11,3 @@
   </DocsPageTemplate>
 
 </template>
-
-
-<script>
-
-  export default {
-    data() {
-      return {
-        exampleValue: 'val-b',
-      };
-    },
-  };
-
-</script>

From bdea2549c270f50eb5d45609c91d2f967cb8419e Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 21 Aug 2024 22:16:18 +0200
Subject: [PATCH 21/21] Add another example to docs

---
 docs/pages/kradiobutton.vue | 85 ++++++++++++++++++++++++++++++++++---
 1 file changed, 80 insertions(+), 5 deletions(-)

diff --git a/docs/pages/kradiobutton.vue b/docs/pages/kradiobutton.vue
index 36143c46b..a9f188332 100644
--- a/docs/pages/kradiobutton.vue
+++ b/docs/pages/kradiobutton.vue
@@ -13,12 +13,12 @@
           <KRadioButton
             v-model="exampleValue"
             label="Option A"
-            value="val-a"
+            buttonValue="val-a"
           />
           <KRadioButton
             v-model="exampleValue"
             label="Option B"
-            value="val-b"
+            buttonValue="val-b"
           />
           <KRadioButton
             v-model="exampleValue"
@@ -38,17 +38,17 @@
         </p>
       </DocsShow>
 
-      <DocsShowCode lang="html">
+      <DocsShowCode language="html">
         <KRadioButtonGroup>
           <KRadioButton
             v-model="exampleValue"
             label="Option A"
-            value="val-a"
+            buttonValue="val-a"
           />
           <KRadioButton
             v-model="exampleValue"
             label="Option B"
-            value="val-b"
+            butonValue="val-b"
           />
           <KRadioButton
             v-model="exampleValue"
@@ -64,6 +64,81 @@
           />
         </KRadioButtonGroup>
       </DocsShowCode>
+
+      <h3>With grid layout</h3>
+
+      <p>It is possible to use radio buttons together with grid layout components such as <DocsLibraryLink component="KGrid" /> or <DocsLibraryLink component="KFixedGrid" />. For example: </p>
+
+      <DocsShow>
+
+        <KRadioButtonGroup>
+          <KFixedGrid :numCols="2">
+            <KFixedGridItem :span="1">
+              <KRadioButton
+                v-model="exampleValue"
+                label="Option A"
+                buttonValue="val-a"
+              />
+              <KRadioButton
+                v-model="exampleValue"
+                label="Option B"
+                buttonValue="val-b"
+              />
+            </KFixedGridItem>
+            <KFixedGridItem :span="1">
+              <KRadioButton
+                v-model="exampleValue"
+                label="Option C"
+                description="This one is special!"
+                buttonValue="val-c"
+              />
+              <KRadioButton
+                v-model="exampleValue"
+                label="Truncated label. Adjusting your browser window size to see this in action."
+                buttonValue="val-d"
+                truncateLabel
+              />
+            </KFixedGridItem>
+          </KFixedGrid>
+        </KRadioButtonGroup>
+
+        <p>
+          Current value: {{ exampleValue }}
+        </p>
+      </DocsShow>
+
+      <DocsShowCode language="html">
+        <KRadioButtonGroup>
+          <KFixedGrid :numCols="2">
+            <KFixedGridItem :span="1">
+              <KRadioButton
+                v-model="exampleValue"
+                label="Option A"
+                buttonValue="val-a"
+              />
+              <KRadioButton
+                v-model="exampleValue"
+                label="Option B"
+                buttonValue="val-b"
+              />
+            </KFixedGridItem>
+            <KFixedGridItem :span="1">
+              <KRadioButton
+                v-model="exampleValue"
+                label="Option C"
+                description="This one is special!"
+                buttonValue="val-c"
+              />
+              <KRadioButton
+                v-model="exampleValue"
+                label="Truncated label. Adjusting your browser window size to see this in action."
+                buttonValue="val-d"
+                truncateLabel
+              />
+            </KFixedGridItem>
+          </KFixedGrid>
+        </KRadioButtonGroup>
+      </DocsShowCode>
     </DocsPageSection>
 
     <DocsPageSection title="Layout" anchor="#layout">