Merge pull request #14809 from nextcloud/fix/accessibility-theme-keyboard

Fix selecting an accessibility theme with the keyboard

Author: rullzer

apps/accessibility/js/accessibility.js

@@ -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
 			);
 		}
 	}