From da46c30893a4ae5e3aaf2de2213e73281e87aaf2 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 3 Mar 2023 23:38:56 -0500
Subject: [PATCH] Fix display of theme checkboxes
---
src/components/font_control/font_control.vue | 5 ++++-
src/components/range_input/range_input.vue | 8 ++++++--
src/components/shadow_control/shadow_control.vue | 3 ++-
3 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index bb7e64bc6..e2ba74d13 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -4,6 +4,7 @@
:class="{ custom: isCustom }"
>
<label
+ :id="name + '-label'"
:for="preset === 'custom' ? name : name + '-font-switcher'"
class="label"
>
@@ -12,7 +13,8 @@
<input
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
- class="opt exlcude-disabled"
+ :aria-labelledby="name + '-label'"
+ class="opt exlcude-disabled visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@@ -21,6 +23,7 @@
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
+ :aria-hidden="true"
/>
{{ ' ' }}
<Select
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 1e7e42d58..1e7201053 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -4,6 +4,7 @@
:class="{ disabled: !present || disabled }"
>
<label
+ :id="name + '-label'"
:for="name"
class="label"
>
@@ -12,7 +13,8 @@
<input
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
- class="opt"
+ :aria-labelledby="name + '-label'"
+ class="opt visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', !present ? fallback : undefined)"
@@ -21,6 +23,7 @@
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
+ :aria-hidden="true"
/>
<input
:id="name"
@@ -34,9 +37,10 @@
@input="$emit('update:modelValue', $event.target.value)"
>
<input
- :id="name"
+ :id="name + '-numeric'"
class="input-number"
type="number"
+ :aria-labelledby="name + '-label'"
:value="modelValue || fallback"
:disabled="!present || disabled"
:max="hardMax"
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 7546535db..1f3c26aa7 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -129,12 +129,13 @@
v-model="selected.inset"
:disabled="!present"
name="inset"
- class="input-inset"
+ class="input-inset visible-for-screenreader-only"
type="checkbox"
>
<label
class="checkbox-label"
for="inset"
+ :aria-hidden="true"
/>
</div>
<div
--
GitLab