fix(accessibility): Enable tabbing on sort header of table chart (#26326

)
apache · Dec 23, 2023 · b6d433d · b6d433d
1 parent 3391e29
commit b6d433d
Showing 1 changed file with 13 additions and 0 deletions.
diff --git 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 && {