From b6d433de32cad21c0866ee98fd5ae85b4459c23b Mon Sep 17 00:00:00 2001
From: arun <arun.tirumani@gmail.com>
Date: Sat, 23 Dec 2023 11:58:41 +0530
Subject: [PATCH] fix(accessibility): Enable tabbing on sort header of table
 chart (#26326)

---
 .../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 917abb929a8ec..d106e42a84fc4 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 && {