pigui/task-stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): settings and bell use accessible checkboxes, not slide toggles

Browse Source 
@pi/ui's slide toggle hides its input with display: none and gives it
no name: neither the Tab key nor a screen reader could reach the
switches in settings (visibility, the public's proposals, the
definition of done, the link for clients) or the bell's (e-mail copy,
notices on this device). They are pi-checkbox now, each with a name
saying what it turns on: reachable by keyboard, toggled with the space
bar and announced.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-10-16 20:20:06 +02:00
parent e10c9b84bf
commit 4969fb3f6d
6 changed files with 46 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
libs/web/tracker/presenters/src/lib/ui/notifications-bell.ts
View File

@@ -11,7 +11,7 @@ import {
PiBadgeComponent,
PiIconButtonComponent,
PiIconComponent,
PiSlideToggleComponent,
PiCheckboxComponent,
} from '@pi/ui';
import { DrawerService } from '@task-stream/web/shared/ui';
import { InboxFacade, PushFacade } from '@task-stream/web/tracker/application';
@@ -46,7 +46,7 @@ const ICON: Record<NotificationKind, string> = {
PiBadgeComponent,
PiIconButtonComponent,
PiIconComponent,
PiSlideToggleComponent,
PiCheckboxComponent,
],
template: `
<pi-badge
@@ -81,25 +81,19 @@ const ICON: Record<NotificationKind, string> = {
(execute)="inbox.markRead()"
/>
@if (inbox.settings()?.emailAvailable) {
<div class="ts-inbox__switch">
<pi-slide-toggle
label="Copia por correo"
[checked]="inbox.settings()?.email ?? false"
(checkedChange)="inbox.setEmail($event)"
/>
<span aria-hidden="true">Copia por correo</span>
</div>
<pi-checkbox
label="Copia por correo"
[checked]="inbox.settings()?.email ?? false"
(checkedChange)="inbox.setEmail($event)"
/>
}
@if (inbox.settings()?.pushPublicKey && push.supported) {
<div class="ts-inbox__switch">
<pi-slide-toggle
label="Avisos en este dispositivo"
[checked]="push.on()"
[disabled]="push.busy()"
(checkedChange)="togglePush($event)"
/>
<span aria-hidden="true">Avisos en este dispositivo</span>
</div>
<pi-checkbox
label="Avisos en este dispositivo"
[checked]="push.on()"
[disabled]="push.busy()"
(checkedChange)="togglePush($event)"
/>
}
</div>
@if (push.error(); as error) {
@@ -156,12 +150,6 @@ const ICON: Record<NotificationKind, string> = {
justify-content: space-between;
gap: 0.75rem;
}
.ts-inbox__switch {
display: inline-flex;
gap: 0.5rem;
align-items: center;
font-size: 0.875rem;
}
.ts-inbox__error {
margin: 0;
color: var(--ts-c-red, var(--ts-ink));