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

59
libs/web/tracker/presenters/src/lib/pages/settings.page.ts
View File

@@ -17,12 +17,7 @@ import {
untracked,
} from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import {
PiCheckboxComponent,
PiIconComponent,
PiNoteComponent,
PiSlideToggleComponent,
} from '@pi/ui';
import { PiCheckboxComponent, PiIconComponent, PiNoteComponent } from '@pi/ui';
import { GitIntegrationComponent } from '../ui/git-integration';
import { WebhooksComponent } from '../ui/webhooks';
import { TransferComponent } from '../ui/transfer';
@@ -156,7 +151,6 @@ function idFrom(name: string): string {
NgTemplateOutlet,
PiIconComponent,
PiNoteComponent,
PiSlideToggleComponent,
],
template: `
<div class="ts-settings-layout">
@@ -215,15 +209,13 @@ function idFrom(name: string): string {
}
</p>
</div>
<div class="ts-toggle">
<pi-slide-toggle
label="Proyecto público"
[checked]="project.isPublic"
[disabled]="!facade.canManage()"
(checkedChange)="facade.setPublic($event)"
/>
<span aria-hidden="true">{{ project.isPublic ? 'Público' : 'Privado' }}</span>
</div>
<pi-checkbox
class="ts-toggle"
label="Proyecto público"
[checked]="project.isPublic"
[disabled]="!facade.canManage()"
(checkedChange)="facade.setPublic($event)"
/>
</section>
<section
@@ -249,15 +241,13 @@ function idFrom(name: string): string {
}
</p>
</div>
<div class="ts-toggle">
<pi-slide-toggle
label="Propuestas del público abiertas"
[checked]="project.isPublic && project.acceptsProposals"
[disabled]="!facade.canManage() || !project.isPublic"
(checkedChange)="facade.setAcceptsProposals($event)"
/>
<span aria-hidden="true">{{ project.isPublic && project.acceptsProposals ? 'Abierto' : 'Cerrado' }}</span>
</div>
<pi-checkbox
class="ts-toggle"
label="Formulario abierto"
[checked]="project.isPublic && project.acceptsProposals"
[disabled]="!facade.canManage() || !project.isPublic"
(checkedChange)="facade.setAcceptsProposals($event)"
/>
</section>
@if (facade.canManage()) {
@@ -464,14 +454,12 @@ function idFrom(name: string): string {
medias. El propietario y los admins sí pueden cerrarlo.
</p>
</div>
<div class="ts-toggle">
<pi-slide-toggle
label="Definición de «Hecho» activada"
[checked]="!!d.checklistBeforeDone"
(checkedChange)="setChecklistBeforeDone($event)"
/>
<span aria-hidden="true">{{ d.checklistBeforeDone ? 'Activada' : 'Desactivada' }}</span>
</div>
<pi-checkbox
class="ts-toggle"
label="Exigir la checklist completa"
[checked]="!!d.checklistBeforeDone"
(checkedChange)="setChecklistBeforeDone($event)"
/>
</header>
</section>
@@ -1103,10 +1091,7 @@ function idFrom(name: string): string {
}
}
.ts-toggle {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
flex: none;
font-weight: 600;
}
.ts-danger__confirm {