Skip to content

a11y(inbox): label-first accessible names on the capture composer after moving its test selectors to testids #2700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chris0Jeky merged 3 commits into from
Sep 5, 2026
Merged

a11y(inbox): label-first accessible names on the capture composer after moving its test selectors to testids #2700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
909c5f1
test(inbox): select the capture composer's four fields by testid, not…
Chris0Jeky Sep 5, 2026
6a01c43
a11y(inbox): put the visible label first in the capture composer's fo…
Chris0Jeky Sep 5, 2026
a563d44
fix(inbox): tell the truth about the composer board choice, and hold …
Chris0Jeky Sep 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 26 additions & 19 deletions frontend/taskdeck-web/src/locales/en/inbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,26 +131,29 @@ export default {
// capture vocabulary — receipts, draft restoration, the source radios the Nib
// shares — while these four labels exist only on the Composer's form.
//
// The four `*Aria` names keep their pre-extraction English BYTE FOR BYTE.
// `views/paper/PaperInboxView.spec.ts` and three Playwright specs select
// these controls by their accessible name, so editing the English here is a
// test change and not a copy change. That is also why `labelsAria` and
// `dueAria` do not yet repeat their visible eyebrow first the way
// `boardPicker.triageAria` does (WCAG 2.5.3, the PR #2675 pattern): closing
// that gap needs those selectors migrated to testids first.
// Every `*Aria` name here leads with the field's visible eyebrow and then
// says what the control does (WCAG 2.5.3 label-in-name, the PR #2675 pattern
// the board controls and `boardPicker.triageAria` already follow). The four
// names could only take that shape once the specs stopped selecting these
// controls by accessible name: they now use the composer's `data-testid`
// attributes, so this copy is copy again and not test API. Keep the eyebrow
// and the name in step — `PaperCaptureComposer.spec.ts` asserts the relation,
// not just the strings, and it runs that check in en, it and es, so the rule
// binds a translator in every supported locale and not only in English.
//
// The placeholders stay placeholders — a hint about the shape of the value,
// never the name of the field, which is what the eyebrow and the accessible
// name are for.
// name are for. `bodyPlaceholder` is a sentence and is capitalized;
// `labelsPlaceholder` is a fragment continuing the box and is not.
composer: {
bodyLabel: 'Body',
bodyAria: 'Capture body',
bodyAria: 'Body: write the text of this capture',
bodyPlaceholder: 'The thought, in plain language…',
labelsLabel: 'Labels',
labelsAria: 'Add label',
labelsAria: 'Labels: type a label and press Enter to add it',
labelsPlaceholder: 'add and press Enter',
dueLabel: 'Due (optional)',
dueAria: 'Due date',
dueAria: 'Due (optional): set a due date for this capture',
// A statement about the product, not about this draft: attachments are not
// stored with a capture at all yet, so it never varies by row or state.
attachmentsUnavailable: 'Attachments are not saved with captures yet.',
Expand Down Expand Up @@ -196,14 +199,18 @@ export default {
// different things: the Composer's chooses where a NEW capture will land,
// the triage one chooses a board for the capture already in the row.
//
// `composerAria` keeps its pre-extraction English exactly — see the note on
// `composer` above; it happens to already lead with the visible label.
// `triageAria` is free of external selectors, so it takes the full PR #2675
// shape: the visible label first, then what the control does (WCAG 2.5.3).
// The it/es forms mirror the English rather than expanding on it; Romance
// word order puts the head noun first in `composerAria`, which still leaves
// the visible label inside the accessible name.
composerAria: 'Board picker',
// Both take the PR #2675 shape: the visible label first, then what the
// control does (WCAG 2.5.3). They must stay distinguishable by that second
// half alone — a screen-reader user meeting one of them has no other cue
// about which of the two selects is focused.
//
// `composerAria` may not say the capture LANDS on the chosen board. Every
// capture lands in Inbox; the board choice LINKS it so triage can propose
// against that board, and nothing reaches the board without approve and
// execute (ADR-0003). The composer's own footer and `nib.destination*` say
// exactly that, so this name says "linked to for triage" and the triage
// row's keeps "where this capture goes", which is that select's own job.
composerAria: 'Board: choose which board this capture is linked to for triage',
triageAria: 'Board: choose where this capture goes',
noBoardOption: 'No board · land in inbox',
selectPlaceholder: 'Select a board…',
Expand Down
37 changes: 27 additions & 10 deletions frontend/taskdeck-web/src/locales/es/inbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,28 @@ export default {
// Etiquetas de los campos del Composer (#1871). "Texto" para `body`: es el
// texto de la captura, igual que en `triage.edit.label`. "Fecha límite" es el
// término del glosario para una fecha de vencimiento, como en
// `triage.edit.metadata.dueDate`. El marcador de posición sigue en minúscula
// y no repite el nombre del campo.
// `triage.edit.metadata.dueDate`.
//
// Cada nombre accesible (`*Aria`) empieza por la etiqueta visible del campo y
// después dice qué hace el control (WCAG 2.5.3, el patrón de la PR #2675). Si
// se reescribe una etiqueta visible, hay que reescribir su nombre accesible:
// `PaperCaptureComposer.spec.ts` comprueba la relación, no solo las cadenas, y
// la comprueba también en español, así que romperla aquí pone el test en rojo.
//
// Los marcadores de posición siguen siendo marcadores: una pista sobre la
// FORMA del valor, nunca el nombre del campo, que es lo que aportan la
// etiqueta visible y el nombre accesible. `bodyPlaceholder` es una frase y va
// en mayúscula inicial a propósito; `labelsPlaceholder` es un fragmento que
// continúa el campo y va en minúscula.
composer: {
bodyLabel: 'Texto',
bodyAria: 'Texto de la captura',
bodyAria: 'Texto: escribe el contenido de esta captura',
bodyPlaceholder: 'La idea, en lenguaje sencillo…',
labelsLabel: 'Etiquetas',
labelsAria: 'Añadir etiqueta',
labelsAria: 'Etiquetas: escribe una etiqueta y pulsa Enter para añadirla',
labelsPlaceholder: 'añade y pulsa Enter',
dueLabel: 'Fecha límite (opcional)',
dueAria: 'Fecha límite',
dueAria: 'Fecha límite (opcional): elige cuándo vence esta captura',
attachmentsUnavailable: 'Los archivos adjuntos aún no se guardan con las capturas.',
},
nib: {
Expand Down Expand Up @@ -132,12 +143,18 @@ export default {
composer: 'Composer',
},
boardPicker: {
// `label` encabeza los dos selectores de tablero. `composerAria` sigue al
// inglés ("Board picker"): en español el sustantivo principal va primero y
// "tablero" queda igualmente dentro del nombre accesible. `triageAria`
// lleva la forma completa con la etiqueta visible delante (WCAG 2.5.3).
// `label` encabeza los dos selectores de tablero. Los dos nombres
// accesibles llevan la etiqueta visible delante (WCAG 2.5.3) y solo se
// distinguen por lo que dicen después.
//
// `composerAria` no puede decir que la captura LLEGUE al tablero elegido:
// toda captura llega al Inbox, y el tablero solo la VINCULA para que el
// triage proponga sobre él; nada llega al tablero sin aprobar y ejecutar
// (ADR-0003). Es lo mismo que dicen el pie del Composer y `nib.destination*`,
// así que este nombre dice "se vincula ... para el triage" y el de la fila
// conserva "a dónde va esta captura", que es lo que hace ese selector.
label: 'Tablero',
composerAria: 'Selector de tablero',
composerAria: 'Tablero: elige a qué tablero se vincula esta captura para el triage',
triageAria: 'Tablero: elige a dónde va esta captura',
noBoardOption: 'Sin tablero · llega al Inbox',
selectPlaceholder: 'Selecciona un tablero…',
Expand Down
39 changes: 29 additions & 10 deletions frontend/taskdeck-web/src/locales/it/inbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,17 +87,29 @@ export default {
},
// Etichette dei campi del Composer (#1871). "Testo" per `body`: è il testo
// della cattura, come in `triage.edit.label`, e "Corpo" in italiano richiama
// il corpo di un messaggio, non un appunto. Il segnaposto resta un
// suggerimento in minuscolo e non ripete il nome del campo.
// il corpo di un messaggio, non un appunto.
//
// Ogni nome accessibile (`*Aria`) inizia con l'etichetta visibile del campo e
// poi dice cosa fa il controllo (WCAG 2.5.3, il modello della PR #2675). Se
// si riscrive un'etichetta visibile va riscritto anche il suo nome
// accessibile: `PaperCaptureComposer.spec.ts` verifica la relazione, non solo
// le stringhe, e la verifica anche in italiano, quindi romperla qui fa
// fallire il test.
//
// I segnaposto restano segnaposto: un suggerimento sulla FORMA del valore,
// mai il nome del campo, che è quello che danno l'etichetta visibile e il
// nome accessibile. `bodyPlaceholder` è una frase e ha l'iniziale maiuscola
// per scelta; `labelsPlaceholder` è un frammento che prosegue il campo e resta
// in minuscolo.
composer: {
bodyLabel: 'Testo',
bodyAria: 'Testo della cattura',
bodyAria: 'Testo: scrivi il contenuto di questa cattura',
bodyPlaceholder: 'Il pensiero, in parole semplici…',
labelsLabel: 'Etichette',
labelsAria: 'Aggiungi etichetta',
labelsAria: 'Etichette: scrivi un’etichetta e premi Enter per aggiungerla',
labelsPlaceholder: 'aggiungi e premi Enter',
dueLabel: 'Scadenza (facoltativa)',
dueAria: 'Data di scadenza',
dueAria: 'Scadenza (facoltativa): scegli quando scade questa cattura',
attachmentsUnavailable: 'Gli allegati non vengono ancora salvati con le catture.',
},
nib: {
Expand Down Expand Up @@ -129,12 +141,19 @@ export default {
composer: 'Composer',
},
boardPicker: {
// `label` sta sopra entrambi i selettori di bacheca. `composerAria` segue
// l'inglese ("Board picker"): in italiano il nome della testa va prima, e
// "bacheca" resta comunque dentro il nome accessibile. `triageAria` porta
// per intero la forma etichetta-visibile-per-prima (WCAG 2.5.3).
// `label` sta sopra entrambi i selettori di bacheca. Entrambi i nomi
// accessibili portano l'etichetta visibile per prima (WCAG 2.5.3) e si
// distinguono solo per quello che dicono dopo.
//
// `composerAria` non può dire che la cattura ARRIVI sulla bacheca scelta:
// ogni cattura arriva nell'Inbox, e la bacheca la COLLEGA soltanto perché il
// triage possa proporre su di essa; niente arriva alla bacheca senza
// approvare ed eseguire (ADR-0003). È quello che dicono il piè di pagina del
// Composer e `nib.destination*`, quindi questo nome dice "collegare ... per
// il triage" e quello della riga conserva "dove va questa cattura", che è il
// compito di quel selettore.
label: 'Bacheca',
composerAria: 'Selettore bacheca',
composerAria: 'Bacheca: scegli a quale bacheca collegare questa cattura per il triage',
triageAria: 'Bacheca: scegli dove va questa cattura',
noBoardOption: 'Nessuna bacheca · arriva nell’Inbox',
selectPlaceholder: 'Seleziona una bacheca…',
Expand Down
Loading
Loading