You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2023/12/27 12:20:23 UTC
(superset) 08/11: fix(accessibility): Enable tabbing on sort header of table chart (#26326)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch 3.0
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 643cb9df2b9478c44086954e9304e3e1ff4f7757
Author: arun <ar...@gmail.com>
AuthorDate: Sat Dec 23 11:58:41 2023 +0530
fix(accessibility): Enable tabbing on sort header of table chart (#26326)
(cherry picked from commit b6d433de32cad21c0866ee98fd5ae85b4459c23b)
---
.../plugins/plugin-chart-table/src/TableChart.tsx | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 917abb929a..d106e42a84 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -71,6 +71,12 @@ interface TableSize {
height: number;
}
+const ACTION_KEYS = {
+ enter: 'Enter',
+ spacebar: 'Spacebar',
+ space: ' ',
+};
+
/**
* Return sortType based on data type
*/
@@ -591,6 +597,13 @@ export default function TableChart<D extends DataRecord = DataRecord>(
...sharedStyle,
...style,
}}
+ tabIndex={0}
+ onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
+ // programatically sort column on keypress
+ if (Object.values(ACTION_KEYS).includes(e.key)) {
+ col.toggleSortBy();
+ }
+ }}
onClick={onClick}
data-column-name={col.id}
{...(allowRearrangeColumns && {