usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve switch accessibility

This commit is contained in:
kakkokari-gtyih 2024-07-09 23:04:42 +09:00
parent fe046efd1d
commit 93b2b9818a
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/src/components/MkSwitch.vue
View File

@ -10,9 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-only
type="checkbox" type="checkbox"
:disabled="disabled" :disabled="disabled"
:class="$style.input" :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"> <span v-if="!noBody" :class="$style.body">
<!-- TODO: 無名slotの方は廃止 --> <!-- TODO: 無名slotの方は廃止 -->
<span :class="$style.label"> <span :class="$style.label">
@ -75,7 +75,13 @@ const toggle = () => {
height: 0; height: 0;
opacity: 0; opacity: 0;
margin: 0; margin: 0;
&:focus-visible ~ .toggle {
outline: 2px solid var(--focus);
outline-offset: 2px;
} }
}
.body { .body {
margin-left: 12px; margin-left: 12px;
margin-top: 2px; margin-top: 2px;