Fix input switch accessibility

pull/6003/head
Chocobozzz 2023-10-11 11:49:15 +02:00
parent 30ad7fdf69
commit e2c7e58f42
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 7 additions and 2 deletions

View File

@ -1,2 +1,2 @@
<input type="checkbox" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
<input type="checkbox" role="switch" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
<label [for]="inputName" class="ms-auto">Toggle</label>

View File

@ -3,7 +3,8 @@
input {
position: absolute;
visibility: hidden;
top: -100px;
left: -100px;
+ label {
cursor: pointer;
@ -41,4 +42,8 @@ input {
transform: translateX(-100%);
}
}
&:focus-visible + label {
outline: 2px solid;
}
}