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

Table, Tree table: add dataReloadBtnLoading input so the reload button keeps focus while data loads

Chiusa
  • Qualcosa non va?
#895 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@fateeand ci sta già lavorando.

Dal 26/10/2026.

  • #897 di @fateeand — aperta

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

enhancement library

Problem

cps-table and cps-tree-table only offer dataReloadBtnDisabled for the "Reload data" toolbar button. Apps bind it to their loading state, so the button is disabled while the data reloads.

A disabled button can't keep keyboard focus. When a keyboard user presses "Reload data", focus falls back to <body> and the focus ring disappears until the data arrives. With a real backend that takes a second or more. Screen readers lose their place too. (WCAG 2.4.3 Focus Order, 2.4.7 Focus Visible.)

Apps can move focus back once loading ends, but the gap remains. The only way around it today is to stop disabling the button, and then the user gets no sign that a reload is running.

Proposal

Add an input dataReloadBtnLoading: boolean (default false) to CpsTableComponent and CpsTreeTableComponent, and pass it to the reload button:

<cps-button
  ariaLabel="Reload data"
  icon="refresh"
  ...
  [disabled]="dataReloadBtnDisabled"
  [loading]="dataReloadBtnLoading"
  (clicked)="onReloadData()">
</cps-button>

cps-button already handles loading the way we need:

  • the native button stays enabled, so it keeps focus and its focus ring;
  • clicks and Enter are ignored while loading, so no double reloads;
  • it gets aria-busy="true" and the loading style.

dataReloadBtnDisabled stays as it is, for when reloading really isn't possible.

Example

<cps-table
  [showDataReloadBtn]="true"
  [dataReloadBtnLoading]="loading"
  (dataReloadBtnClicked)="reload()"
  [loading]="loading">
</cps-table>
Lingua principale
TypeScript
Stelle
9
Fork
7
Merge medio
1g 5h
PR unite (30g)
7

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.