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

Fix selecting an accessibility theme with the keyboard
This commit is contained in:
Roeland Jago Douma 2019-03-25 09:05:55 +01:00 committed by GitHub
commit 4785faed0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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