Table, Tree table: focus is lost after closing a column filter with Apply, Clear or Close
メンテナーはふだん 1 日以内に返信
評価
この issue はまだ評価されていません。
説明
Problem
When a column filter menu is opened from its filter button in the header cell, closing it with a button inside the menu sends focus to <body>. Keyboard users then have to Tab from the top of the page to get back to the table, and screen readers lose their place. (WCAG 2.4.3 Focus Order.)
Pressing Esc already does the right thing: focus goes back to the filter button. Apply, Clear and Close (×) should do the same.
Steps to reproduce
- Tab to a column's filter button ("Open filter menu") and press Enter.
- Close the menu in one of these ways:
- Apply (
filterShowApplyButtonistrue), or - Clear, when
filterHideOnClearistrue, or - Close filter (×) in the menu header.
- Apply (
- Check
document.activeElement.
Actual: <body>, with no focus ring anywhere.
Expected: the column's filter button, with its focus ring for keyboard users. This is what Esc does now.
Seen in cps-ui-kit 21.30.1. Both cps-table (cpsTColFilter) and cps-tree-table (cpsTTColFilter) render the same table-column-filter component, so both are affected.
Cause
applyFilter(), clearFilter() (with hideOnClear) and onCloseClick() all call hide() → columnFilterMenu.hide(). That path doesn't return focus to the trigger button. The focused button is inside the menu, so when the menu closes, focus is lost.
Proposal
When the menu is closed from inside (Apply, Clear with hideOnClear, Close), move focus back to the filter button (.cps-table-col-filter-menu-button) the same way Esc does. Use CPS_FOCUS_SERVICE.focusElement(button, isKeyboard()) so the ring shows only for keyboard users. Do this only when focus was inside the menu, so clicking outside the menu doesn't pull focus back.
- 主要言語
- 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 日以内に返信
-
CpsDatepickerComponent: disabled cells are not marked aria-disabled対応中かも @fateeand が 3 日前に担当しました。 オープンbug library
AbsaOSS/cps-shared-ui#891 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
library new component
難易度 3/5 半日 初心者へのやさしさ 55/100
AbsaOSS/cps-shared-ui#853 ·
メンテナーはふだん 1 日以内に返信
AbsaOSS/cps-shared-ui の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
better-auth/better-auth#12132 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信
-
o8 next debug build aborts on Glass to Dark appearance switch (nil identifier messaged before check)オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
hurttlocker/o8#5112 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
webrecorder/wabac.js#386 ·
-
needs-triage
難易度 1/5 1〜3時間 初心者へのやさしさ 92/100
agent-of-empires/agent-of-empires#5098 · コメント 1 件 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信