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 { 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 { } } + 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[] { const result: m.Vnode[] = []; 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 { 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)=>{