Made a new KRadioButtonGroup component to fix Firefox radio button movement with arrow keys issue

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>

docs/tableOfContents.js

@@ -396,6 +396,11 @@ export default [
         title: 'KListWithOverflow',
         isCode: true,
       }),
+      new Page({
+        path: '/kradiobuttongroup',
+        title: 'KRadioButtonGroup',
+        isCode: true,
+      }),
     ],
   }),
 ];

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,13 @@
          */
         this.$emit('blur');
       },
+      /**
+       * @public
+       * Set the tabIndex value
+       */
+      setTabIndex(val) {
+        this.tabIndex = val;
+      },
     },
   };
 

lib/KRadioButtonGroup.vue

@@ -0,0 +1,133 @@
+<template>
+
+  <div class="k-radio-button-group">
+    <!-- @slot To render the KRadioButtons -->
+    <slot></slot>
+  </div>
+
+</template>
+
+
+<script>
+
+  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,
+      };
+    },
+    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) {
+          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);
+            });
+          }
+
+          this.lastRadioIdx = this.radioButtons.length - 1;
+          this.radioButtons[this.focusedRadioIdx].setTabIndex(0);
+          this.radioButtons.forEach((radioBtn, index) => {
+            radioBtn.$on('input', () => {
+              this.handleInputChange(index);
+            });
+          });
+        }
+      });
+    },
+    beforeDestroy() {
+      for (let radioBtn in this.radioButtons) {
+        radioBtn.$el.removeEventListener('keyup', this.onKeyUp);
+      }
+    },
+    methods: {
+      handleInputChange(idx) {
+        if (this.isFirefox) {
+          this.setChecked(idx);
+          this.focusedRadioIdx = idx;
+        }
+      },
+      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);
+        }
+      },
+      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.radioButtons[radioIdx].toggleCheck(event);
+        }
+      },
+    },
+  };
+
+</script>

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);
 }

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('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('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);
+    });
+    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);
+    });
+  });
+});