Skip to content

Commit afdff2d

Browse files
Change focus states of checkboxes and radios
1 parent 20c1ae9 commit afdff2d

File tree

5 files changed

+14
-11
lines changed

5 files changed

+14
-11
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ $nav-width = 300px
3636
$portrait-breakpoint = 520px
3737
$medium-breakpoint = 619px
3838

39-
39+
$core-outline = $core-action-light 2px solid

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@ a
6161
color: $core-action-dark
6262

6363
&:hover:focus
64-
outline: $core-action-light 2px solid
64+
outline: $core-outline
6565

6666
:focus
67-
outline: $core-action-light 2px solid
67+
outline: $core-outline
6868

6969
// https://davidwalsh.name/html5-boilerplate
7070
img

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<div class="k-checkbox" :class="{ 'k-checkbox-active': isActive }">
1111
<input
12+
ref="kCheckboxInput"
1213
type="checkbox"
1314
class="k-checkbox-input"
1415
:id="id"
@@ -127,6 +128,7 @@
127128
toggleCheck(event) {
128129
if (!this.disabled) {
129130
this.isCurrentlyChecked = !this.isCurrentlyChecked;
131+
this.$refs.kCheckboxInput.focus();
130132
this.isCurrentlyIndeterminate = false;
131133
/**
132134
* Emits change event
@@ -178,10 +180,10 @@
178180
179181
.k-checkbox-active
180182
.k-checkbox-checked, .k-checkbox-indeterminate
181-
fill: $core-action-dark
183+
outline: $core-outline
182184
183185
.k-checkbox-unchecked
184-
fill: $core-text-default
186+
outline: $core-outline
185187
186188
.k-checkbox-label
187189
display: table-cell

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<div class="k-radio" :class="{ 'k-radio-active': isActive }">
1111
<input
12+
ref="kRadioInput"
1213
type="radio"
1314
class="k-radio-input"
1415
:id="id"
@@ -64,9 +65,10 @@
6465
*/
6566
value: {
6667
type: [String, Number, Boolean],
68+
required: true,
6769
},
6870
/**
69-
* Value of the radio
71+
* Unique value of the particular radio
7072
*/
7173
radiovalue: {
7274
type: [String, Number, Boolean],
@@ -103,6 +105,7 @@
103105
methods: {
104106
select() {
105107
if (!this.disabled) {
108+
this.$refs.kRadioInput.focus();
106109
this.model = this.radiovalue;
107110
this.emitChange();
108111
}
@@ -159,10 +162,7 @@
159162
160163
.k-radio-active
161164
.k-radio-selected
162-
fill: $core-action-dark
163-
164-
.k-radio-unselected
165-
fill: $core-text-default
165+
outline: $core-outline
166166
167167
.k-radio-label
168168
display: table-cell

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
@change="changeSelection"
6767
/>
6868
</th>
69-
<th class="col-title">{{ $tr('selectAll') }}</th>
69+
<th class="col-title">{{ $tr('name') }}</th>
7070
<th class="col-selection"></th>
7171
</tr>
7272
</thead>
@@ -165,6 +165,7 @@
165165
removed: 'Removed',
166166
selected: '{count, number, integer} {count, plural, one {Exercise} other {Exercises}} selected',
167167
duplicateTitle: 'An exam with that title already exists',
168+
name: 'Name',
168169
},
169170
data() {
170171
return {

0 commit comments

Comments
 (0)