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

cps-table / cps-tree-table: toolbar scrolls sideways instead of wrapping (WCAG 1.4.10)

Aperta
  • Qualcosa non va?
#912 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, playwright, scss, typescript
Ambito
accessibility, frontend, testing

Direzione di ricerca

Start with the toolbar rules in projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss and projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss, then read the corresponding reflow cases in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts. Run the reflow tests and compare desktop and narrow-viewport behavior. Done means all toolbar controls are visible without sideways scrolling at the specified widths and text size, desktop rendering is unchanged, and the listed entries are removed from KNOWN_FAILURES.

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

Descrizione

Problem

The toolbar of cps-table and cps-tree-table doesn't reflow (WCAG 1.4.10). It's a single flex row with overflow: auto. When the title and actions don't fit, the toolbar scrolls sideways and actions end up out of view.

Found by the reflow tests added in #908:

  • Table 7 at 320 px, 640 px and 200% text (custom toolbar with a button toggle).
  • Table 3 at 1280 px with 200% text.
  • Tree tables 3 and 7.

Where

  • projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:67-84 (.p-datatable .p-datatable-header: display: flex; justify-content: space-between; overflow: auto).
  • projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:487-503 (.p-treetable .p-treetable-header, same rules).

Why it's not a one-line fix

flex-wrap: wrap on the toolbar changes the desktop layout. Today a long title wraps inside the left group, and the actions stay on the right (Table 2, 3 and 6, Tree tables 2 and 3). With wrapping, the actions move to a second line at 1280 px. The left and right groups need flex sizing that keeps the current desktop layout and only wraps once the actions can't fit. The toolbar has a min-height, not a fixed height, so it can grow.

Acceptance criteria

  • At 320 px and 640 px, and at 1280 px with 200% text, every toolbar control is visible without sideways scrolling.
  • Remove the toolbar entries from KNOWN_FAILURES in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts (Table 3, Table 7, Tree table 3, Tree table 7). Their tests then pass, unless another linked issue still applies.
  • 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.