From c6b14c4bff0a099520ad7c8e7a0e31a4a5d2545e Mon Sep 17 00:00:00 2001
From: Andrew Levans <a.levans@partner.samsung.com>
Date: Thu, 14 Dec 2023 14:03:45 -0600
Subject: [PATCH] Make timeline easier to use without mouse

---
 ui/src/assets/common.scss            |  1 -
 ui/src/frontend/track_group_panel.ts | 52 ++++++++++++++++++----------
 ui/src/frontend/track_panel.ts       |  8 +++++
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index 7b2fa8cb1a..63a09d6e35 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -141,7 +141,6 @@ button {
   padding: 0;
   font: inherit;
   cursor: pointer;
-  outline: inherit;
 }
 
 button.close {
diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
index fd9c7ab35e..b598085d07 100644
--- a/ui/src/frontend/track_group_panel.ts
+++ b/ui/src/frontend/track_group_panel.ts
@@ -147,16 +147,28 @@ export class TrackGroupPanel extends Panel<Attrs> {
     const titleStyling = indent(depth(trackGroup));
     const dragClass = this.dragging ? `drag` : '';
     const dropClass = this.dropping ? `drop-${this.dropping}` : '';
+    const onclick = (e: Event) => {
+      globals.dispatch(Actions.toggleTrackGroupCollapsed({
+        trackGroupId: attrs.trackGroupId,
+      })),
+          e.stopPropagation();
+    };
     return m(
         `.track-group-panel[collapsed=${collapsed}]`,
         {id: 'track_' + this.trackGroupId},
         m(`.shell[draggable=true]`,
           {
-            onclick: (e: MouseEvent) => {
-              globals.dispatch(Actions.toggleTrackGroupCollapsed({
-                trackGroupId: attrs.trackGroupId,
-              })),
-                  e.stopPropagation();
+            tabindex: '0',
+            onclick,
+            onkeydown: (event: KeyboardEvent)=> {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onclick(event);
+              }
+              if (this.canDeleteTrackGroup(this.trackGroupState) && (event.key === 'Backspace' || event.key === 'Delete')) {
+                event.preventDefault();
+                this.remove(event);
+              }
             },
             class: `${highlightClass} ${dragClass} ${dropClass}`,
             ondragstart: this.ondragstart.bind(this),
@@ -307,25 +319,27 @@ export class TrackGroupPanel extends Panel<Attrs> {
     }
   }
 
+  protected remove = (e: Event) => {
+    const removeTracks: RemoveTrackArgs[] = [];
+    const removeGroups: RemoveTrackGroupArgs[] = [];
+    this.collectRemoveTrackGroupActions(
+      this.trackGroupState,
+      removeTracks,
+      removeGroups,
+    );
+    globals.dispatchMultiple([
+      Actions.removeTracks({tracks: removeTracks}),
+      Actions.removeTrackGroups({trackGroups: removeGroups}),
+    ]);
+    e.stopPropagation();
+  };
+
   getTrackGroupActionButtons(): m.Vnode<any>[] {
     const result: m.Vnode<any>[] = [];
   const disabled = !this.canDeleteTrackGroup(this.trackGroupState);
       result.push(
         m(TrackButton, {
-          action: (e: MouseEvent) => {
-            const removeTracks: RemoveTrackArgs[] = [];
-            const removeGroups: RemoveTrackGroupArgs[] = [];
-            this.collectRemoveTrackGroupActions(
-              this.trackGroupState,
-              removeTracks,
-              removeGroups,
-            );
-            globals.dispatchMultiple([
-              Actions.removeTracks({tracks: removeTracks}),
-              Actions.removeTrackGroups({trackGroups: removeGroups}),
-            ]);
-            e.stopPropagation();
-          },
+          action: this.remove,
           i: 'delete',
           disabled,
           tooltip: 'Remove track group',
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 54037368da..f2fd7eccbd 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -108,6 +108,14 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
     return m(
         `.track-shell[draggable=true]`,
         {
+          tabindex: '0',
+          onkeydown: (event: KeyboardEvent)=> {
+            if (event.key === 'Backspace' || event.key === 'Delete') {
+              event.preventDefault();
+              globals.dispatch(
+                Actions.removeTrack({trackId: attrs.trackState.id}));
+            }
+          },
           class: `${highlightClass} ${dragClass} ${dropClass}`,
           ondragstart: this.ondragstart.bind(this),
           ondragenter: (e: DragEvent)=>{