Table, Tree table: add dataReloadBtnLoading input so the reload button keeps focus while data loads
メンテナーはふだん 1 日以内に返信
評価
この issue はまだ評価されていません。
説明
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>
- 主要言語
- TypeScript
- スター
- 9
- フォーク
- 7
- 平均マージ
- 1日 5時間
- マージ済み PR（30日）
- 7
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
AbsaOSS/cps-shared-ui のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
AbsaOSS/cps-shared-ui#875 ·
メンテナーはふだん 1 日以内に返信
-
enhancement library
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
AbsaOSS/cps-shared-ui#644 ·
メンテナーはふだん 1 日以内に返信
-
Fix WCAG 2.5.3 label-in-name mismatches and re-enable axe rule対応中かも @lukasmatta が今日担当しました。 オープンaccessibility
AbsaOSS/cps-shared-ui#900 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
Table, Tree table: focus is lost after closing a column filter with Apply, Clear or Close対応中かも @fateeand が 2 日前に担当しました。 オープンbug library
AbsaOSS/cps-shared-ui#896 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
CpsDatepickerComponent: disabled cells are not marked aria-disabled対応中かも @fateeand が 3 日前に担当しました。 オープンbug library
AbsaOSS/cps-shared-ui#891 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
AbsaOSS/cps-shared-ui の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
marmelab/react-admin#11431 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
db-ux-design-system/core-web#8655 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
stripe/react-stripe-js#728 ·
-
[Upload Grade C dataset] the pop-up changes it's size while uploading the document => Jumping effectオープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
epam/statgpt-admin-frontend#305 ·
メンテナーはふだん 1 日以内に返信