Fix selecting an accessibility theme with the keyboard

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

apps/accessibility/src/App.vue

@@ -82,9 +82,11 @@ export default {
 	},
 	methods: {
 		selectTheme(id) {
+			console.debug(id)
 			this.selectItem('theme', id);
 		},
 		selectFont(id) {
+			console.debug(id)
 			this.selectItem('font', id);
 		},
 

apps/accessibility/src/components/itemPreview.vue

@@ -4,8 +4,8 @@
 		<div class="preview-description">
 			<h3>{{preview.title}}</h3>
 			<p>{{preview.text}}</p>
-			<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" :checked="selected === preview.id" />
-			<label :for="'accessibility-' + preview.id" @click="selectItem">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
+			<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" @change="selectItem" />
+			<label :for="'accessibility-' + preview.id">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
 		</div>
 	</div>
 </template>
@@ -14,12 +14,16 @@
 export default {
 	name: 'itemPreview',
 	props: ['preview', 'selected'],
+	data() {
+		return {
+			checked: this.selected === this.preview.id,
+		};
+	},
 	methods: {
 		selectItem() {
 			this.$emit(
 				'select',
-				// if we clicked the already selected one: disable it
-				this.preview.id === this.selected ? false : this.preview.id
+				this.checked ? this.preview.id : false
 			);
 		}
 	}