Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

cps-tree-table: columns shrink and cut off cell text (WCAG 1.4.10, 1.4.4)

Aperta
  • Qualcosa non va?
#913 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
angular, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start with the column-width sync in projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts:1280-1290 and the fixed table layout in projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:76-90; compare with cps-table's scrolling behavior. Run the reflow and 200% text tests in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts. Done when the specified widths no longer cut off cell text, the Tree table 2–13 failure is removed from KNOWN_FAILURES, and desktop rendering is unchanged.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Problem

cps-tree-table cuts off cell text when its columns don't fit (WCAG 1.4.10 and 1.4.4). The table always fits its container: table-layout: fixed; width: 100%. Each header and body cell gets overflow: hidden, so columns shrink instead of the table scrolling sideways, and cell text is cut off with no ellipsis and no other way to read it.

At 320 px and 640 px wide, columns get as narrow as 21–48 px, so "Applications" shows in a 48 px cell. The same happens at 1280 px with 200% text. cps-table doesn't have this problem: its table keeps its natural width and scrolls inside .p-datatable-table-container.

Found by the reflow and 200% text tests added in #908, in Tree tables 2–13. Tree table 1 (scrollable=false), 14 and 15 pass.

Where

  • projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:76-80 (table-layout: fixed; width: 100%) and :90 (th { overflow: hidden }).
  • projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts:1280-1290: the column width sync sets each td's width and overflow: hidden inline.
  • The minWidth input (ts:164) makes the table scroll, but it's empty by default, and none of the examples set it.

Why it's not a one-line fix

Column widths are synchronised in JavaScript between the separate header and body tables, and with resizable columns. Letting columns keep a minimum width means changing that logic: for example, a default minimum column width, or measuring content. The desktop layout must stay the same.

Acceptance criteria

  • At 320 px and 640 px, and at 1280 px with 200% text, no tree table cell text is cut off. The table scrolls sideways inside .p-treetable-scrollable-body (already allowed in the spec).
  • Remove the tree table column entry from KNOWN_FAILURES in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts. The Tree table 2–13 tests then pass, unless the table toolbar issue still applies (Tree tables 3 and 7).
  • Desktop rendering is unchanged.
Lingua principale
TypeScript
Stelle
9
Fork
7
Merge medio
1g 11h
PR unite (30g)
13

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di AbsaOSS/cps-shared-ui

Tutte le issue di AbsaOSS/cps-shared-ui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.