Change focus states of checkboxes and radios

Author: christianmemije

kolibri/core/assets/src/styles/definitions.styl

@@ -36,4 +36,4 @@ $nav-width = 300px
 $portrait-breakpoint = 520px
 $medium-breakpoint = 619px
 
-
+$core-outline = $core-action-light 2px solid

kolibri/core/assets/src/styles/main.styl

@@ -61,10 +61,10 @@ a
     color: $core-action-dark
 
   &:hover:focus
-    outline: $core-action-light 2px solid
+    outline: $core-outline
 
 :focus
-  outline: $core-action-light 2px solid
+  outline: $core-outline
 
 // https://davidwalsh.name/html5-boilerplate
 img

kolibri/core/assets/src/views/k-checkbox/index.vue

@@ -9,6 +9,7 @@
 
       <div class="k-checkbox" :class="{ 'k-checkbox-active': isActive }">
         <input
+          ref="kCheckboxInput"
           type="checkbox"
           class="k-checkbox-input"
           :id="id"
@@ -127,6 +128,7 @@
       toggleCheck(event) {
         if (!this.disabled) {
           this.isCurrentlyChecked = !this.isCurrentlyChecked;
+          this.$refs.kCheckboxInput.focus();
           this.isCurrentlyIndeterminate = false;
           /**
            * Emits change event
@@ -178,10 +180,10 @@
 
   .k-checkbox-active
     .k-checkbox-checked, .k-checkbox-indeterminate
-      fill: $core-action-dark
+      outline: $core-outline
 
     .k-checkbox-unchecked
-      fill: $core-text-default
+      outline: $core-outline
 
   .k-checkbox-label
     display: table-cell

kolibri/core/assets/src/views/k-radio-button/index.vue

@@ -9,6 +9,7 @@
 
       <div class="k-radio" :class="{ 'k-radio-active': isActive }">
         <input
+          ref="kRadioInput"
           type="radio"
           class="k-radio-input"
           :id="id"
@@ -64,9 +65,10 @@
        */
       value: {
         type: [String, Number, Boolean],
+        required: true,
       },
       /**
-       * Value of the radio
+       * Unique value of the particular radio
        */
       radiovalue: {
         type: [String, Number, Boolean],
@@ -103,6 +105,7 @@
     methods: {
       select() {
         if (!this.disabled) {
+          this.$refs.kRadioInput.focus();
           this.model = this.radiovalue;
           this.emitChange();
         }
@@ -159,10 +162,7 @@
 
   .k-radio-active
     .k-radio-selected
-      fill: $core-action-dark
-
-    .k-radio-unselected
-      fill: $core-text-default
+      outline: $core-outline
 
   .k-radio-label
     display: table-cell

kolibri/plugins/coach/assets/src/views/create-exam-page/index.vue

@@ -66,7 +66,7 @@
                     @change="changeSelection"
                   />
                 </th>
-                <th class="col-title">{{ $tr('selectAll') }}</th>
+                <th class="col-title">{{ $tr('name') }}</th>
                 <th class="col-selection"></th>
               </tr>
             </thead>
@@ -165,6 +165,7 @@
       removed: 'Removed',
       selected: '{count, number, integer} {count, plural, one {Exercise} other {Exercises}} selected',
       duplicateTitle: 'An exam with that title already exists',
+      name: 'Name',
     },
     data() {
       return {