Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#895 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@fateeand ya está trabajando en esto.

Desde el 26/10/2026.

  • #897 de @fateeand — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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>
Lenguaje dominante
TypeScript
Estrellas
9
Forks
7
Merge medio
18 h 58 min
PR fusionados (30 d)
4

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AbsaOSS/cps-shared-ui

Todos los issues de AbsaOSS/cps-shared-ui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.