Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng
  • Có gì không ổn?
#895 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@fateeand đang làm issue này rồi.

Từ ngày 26/10/2026.

  • #897 của @fateeand — đang mở

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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>
Ngôn ngữ chính
TypeScript
Star
9
Fork
7
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
11

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của AbsaOSS/cps-shared-ui

Tất cả issue của AbsaOSS/cps-shared-ui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.