improve switch accessibility
This commit is contained in:
@@ -10,9 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
type="checkbox"
|
||||
:disabled="disabled"
|
||||
:class="$style.input"
|
||||
@keydown.enter="toggle"
|
||||
@click="toggle"
|
||||
>
|
||||
<XButton :checked="checked" :disabled="disabled" @toggle="toggle"/>
|
||||
<XButton :class="$style.toggle" :checked="checked" :disabled="disabled" @toggle="toggle"/>
|
||||
<span v-if="!noBody" :class="$style.body">
|
||||
<!-- TODO: 無名slotの方は廃止 -->
|
||||
<span :class="$style.label">
|
||||
@@ -75,7 +75,13 @@ const toggle = () => {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
|
||||
&:focus-visible ~ .toggle {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-left: 12px;
|
||||
margin-top: 2px;
|
||||
|
Reference in New Issue
Block a user