Fix display of theme checkboxes

This commit is contained in:
tusooa 2023-03-03 23:38:56 -05:00
parent 0842193957
commit da46c30893
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
3 changed files with 12 additions and 4 deletions

View File

@ -4,6 +4,7 @@
:class="{ custom: isCustom }" :class="{ custom: isCustom }"
> >
<label <label
:id="name + '-label'"
:for="preset === 'custom' ? name : name + '-font-switcher'" :for="preset === 'custom' ? name : name + '-font-switcher'"
class="label" class="label"
> >
@ -12,7 +13,8 @@
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'" :id="name + '-o'"
class="opt exlcude-disabled" :aria-labelledby="name + '-label'"
class="opt exlcude-disabled visible-for-screenreader-only"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)" @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@ -21,6 +23,7 @@
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
class="opt-l" class="opt-l"
:for="name + '-o'" :for="name + '-o'"
:aria-hidden="true"
/> />
{{ ' ' }} {{ ' ' }}
<Select <Select

View File

@ -4,6 +4,7 @@
:class="{ disabled: !present || disabled }" :class="{ disabled: !present || disabled }"
> >
<label <label
:id="name + '-label'"
:for="name" :for="name"
class="label" class="label"
> >
@ -12,7 +13,8 @@
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'" :id="name + '-o'"
class="opt" :aria-labelledby="name + '-label'"
class="opt visible-for-screenreader-only"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@change="$emit('update:modelValue', !present ? fallback : undefined)" @change="$emit('update:modelValue', !present ? fallback : undefined)"
@ -21,6 +23,7 @@
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
class="opt-l" class="opt-l"
:for="name + '-o'" :for="name + '-o'"
:aria-hidden="true"
/> />
<input <input
:id="name" :id="name"
@ -34,9 +37,10 @@
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<input <input
:id="name" :id="name + '-numeric'"
class="input-number" class="input-number"
type="number" type="number"
:aria-labelledby="name + '-label'"
:value="modelValue || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
:max="hardMax" :max="hardMax"

View File

@ -129,12 +129,13 @@
v-model="selected.inset" v-model="selected.inset"
:disabled="!present" :disabled="!present"
name="inset" name="inset"
class="input-inset" class="input-inset visible-for-screenreader-only"
type="checkbox" type="checkbox"
> >
<label <label
class="checkbox-label" class="checkbox-label"
for="inset" for="inset"
:aria-hidden="true"
/> />
</div> </div>
<div <div