Merge pull request #650 from muditchoudhary/KRadioButtonGroup-Component

Made a new KRadioButtonGroup component to fix Firefox radio button movement with arrow keys issue
learningequality · Aug 26, 2024 · 8fd5d35 · 8fd5d35
2 parents 233927f + bdea254
commit 8fd5d35
Show file tree

Hide file tree

Showing 8 changed files with 408 additions and 29 deletions.
diff --git 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
+
+
 - [#723]
   - **Description:** Updates $core-time value from 0.25s to 0.15s
   - **Products impact:** User experience - faster transitions

diff --git a/docs/pages/kradiobutton.vue b/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>

diff --git a/docs/pages/kradiobuttongroup.vue b/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>
diff --git a/docs/tableOfContents.js b/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',

diff --git 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"
@@ -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;
+      },
     },
   };