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 <[email protected]> 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 && {
