merge

CHANGELOG.md

@@ -4,7 +4,38 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#753]
+  - **Description:** Bump KDS version to 5.0.0-rc3.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#753]: https://github.com/learningequality/kolibri-design-system/pull/753
+
+- [#754]
+  - **Description:** Removed the border-radius on align left.
+  - **Products impact:** bugfix.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/741
+  - **Components:** `KCard`
+  - **Breaking:** no -.
+  - **Impacts a11y:** no -.
+  - **Guidance:** -
+
+[#741]: https://github.com/learningequality/kolibri-design-system/pull/751
+
+- [#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
 
 
 [#727]

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

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

lib/KCard/index.vue

@@ -247,13 +247,13 @@
         return this.stylesAndClasses.thumbnailAlignClass;
       },
       /*
-          Returns dynamic classes and few style-like data that CSS was cumbersome/impossible to use for ,or are in need of using theme, grouped by all possible combinations of layouts.
+            Returns dynamic classes and few style-like data that CSS was cumbersome/impossible to use for ,or are in need of using theme, grouped by all possible combinations of layouts.
 
-          New styles and classes are meant to be added to this single-source-of-truth object so
-          that we can easily locate all styling being applied to a particular layout
+            New styles and classes are meant to be added to this single-source-of-truth object so
+            that we can easily locate all styling being applied to a particular layout
 
-          Could be further simplified by using solely dynamic styles, but that would have detrimental effects on our auto RTL machinery and we would need to take care manually of more places. 
-        */
+            Could be further simplified by using solely dynamic styles, but that would have detrimental effects on our auto RTL machinery and we would need to take care manually of more places. 
+          */
       stylesAndClasses() {
         /* In px. Needs to be the same as $spacer variable in styles part */
         const SPACER = 24;
@@ -266,7 +266,6 @@
           width: '100%',
           height: '100%',
         };
-
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'large') {
           return {
             rootClass: 'vertical-with-large-thumbnail',
@@ -316,11 +315,11 @@
             thumbnailAspectRatio: undefined,
             headingStyles: {
               ...headingCommonStyles,
-              width: `calc(60% - ${SPACER * 2}px)` /* same as slots width defined in styles */,
+              width: `calc(60% - ${SPACER * 2}px)`, // same as slots width defined in styles
             },
             thumbnailStyles: {
               ...thumbnailCommonStyles,
-              borderRadius: '8px 0 0 8px',
+              borderRadius: this.thumbnailAlign === 'right' ? '0 8px 8px 0' : '8px 0 0 8px',
             },
           };
         }

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;
+      },
     },
   };