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

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
+
+
 - [#723]
  - **Description:** Updates $core-time value from 0.25s to 0.15s
  - **Products impact:** User experience - faster transitions

docs/pages/kradiobutton.vue

@@ -2,39 +2,143 @@
 
  <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">
  <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"
+ buttonValue="val-a"
+ />
+ <KRadioButton
+ v-model="exampleValue"
+ label="Option B"
+ buttonValue="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 language="html">
+ <KRadioButtonGroup>
+ <KRadioButton
+ v-model="exampleValue"
+ label="Option A"
+ buttonValue="val-a"
+ />
+ <KRadioButton
+ v-model="exampleValue"
+ label="Option B"
+ butonValue="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>
+
+ <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">
@@ -56,11 +160,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>

docs/pages/kradiobuttongroup.vue

@@ -0,0 +1,13 @@
+<template>
+
+ <DocsPageTemplate :apiDocs="true">
+
+ <DocsPageSection title="Overview" anchor="#overview">
+ <p>
+ Ensures <code>KRadioButton</code> groups are accessible in all supported browsers. Refer to <DocsLibraryLink component="KRadioButton" /> for more.
+ </p>
+ </DocsPageSection>
+
+ </DocsPageTemplate>
+
+</template>

docs/tableOfContents.js

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

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"
@@ -71,7 +72,9 @@
  };
 
  /**
- * Used to display all options
+ * Used to display radio buttons.
+ *
+ * To be used within `KRadioButtonGroup`.
  */
  export default {
  name: 'KRadioButton',
@@ -148,6 +151,7 @@
  },
  data: () => ({
  active: false,
+ tabIndex: 0,
  }),
  computed: {
  isChecked() {
@@ -183,6 +187,12 @@
  }
  },
  methods: {
+ /**
+ * Toggles the check state of the radio button.
+ *
+ * @public
+ * @param {Event} event - The event object.
+ */
  toggleCheck(event) {
  if (!this.disabled) {
  this.focus();
@@ -220,6 +230,13 @@
  */
  this.$emit('blur');
  },
+ /**
+ * @public
+ * Sets `tab-index` on input
+ */
+ setTabIndex(val) {
+ this.tabIndex = val;
+ },
  },
  };