Fix being unable to navigate lists via keyboard in single column mode

Closes #5361.

src/RootView.ts

@@ -22,7 +22,7 @@ export const enum LayerType {
 	Overlay = 400,
 }
 
-const enum PrimaryNavigationType {
+export const enum PrimaryNavigationType {
 	Keyboard,
 	Touch,
 	Mouse,
@@ -31,7 +31,7 @@ const enum PrimaryNavigationType {
 
 // global, in case we have multiple instances for some reason
 /** What we infer to be the user's preferred navigation type. */
-let currentNavigationType: PrimaryNavigationType = isApp() ? PrimaryNavigationType.Touch : PrimaryNavigationType.Mouse
+export let currentNavigationType: PrimaryNavigationType = isApp() ? PrimaryNavigationType.Touch : PrimaryNavigationType.Mouse
 
 /**
  * View which wraps anything that we render.
@@ -64,7 +64,7 @@ export class RootView implements ClassComponent {
 				},
 				onkeyup: (e: EventRedraw<KeyboardEvent>) => {
 					// tab key can be pressed in some other situations e.g. editor but it would be switched back quickly again if needed.
-					if (isKeyPressed(e.key, Keys.TAB, Keys.UP, Keys.DOWN)) {
+					if (isKeyPressed(e.key, Keys.TAB, Keys.UP, Keys.DOWN, Keys.J, Keys.K)) {
 						this.switchNavType(PrimaryNavigationType.Keyboard)
 					}
 					e.redraw = false

src/gui/SelectableRowContainer.ts

@@ -4,6 +4,7 @@ import { theme } from "./theme.js"
 import { styles } from "./styles.js"
 import { px, size } from "./size.js"
 import { DefaultAnimationTime } from "./animation/Animations.js"
+import { currentNavigationType, PrimaryNavigationType } from "../RootView.js"
 
 /** A function that can adjust the style of the selectable row. */
 export type SelectableRowSelectedSetter = (selected: boolean, isInMultiselect: boolean) => unknown
@@ -51,8 +52,10 @@ export class SelectableRowContainer implements ClassComponent<SelectableRowConta
 	}
 
 	private updateDomBg = () => {
-		// in single column layout the "current element" selection is not meaningful and is even annoying
-		const highlight = styles.isSingleColumnLayout() ? this.isInMultiselect && this.selected : this.selected
+		const isUsingKeyboard = currentNavigationType === PrimaryNavigationType.Keyboard
+		// In the single column view, a row may be 'selected' by the URL still linking to a specific mail
+		// So do not highlight in that case but in just multiselect mode and keyboard navigation
+		const highlight = styles.isSingleColumnLayout() ? (this.isInMultiselect || isUsingKeyboard) && this.selected : this.selected
 		if (this.dom) {
 			this.dom.style.backgroundColor = highlight ? stateBgHover : theme.list_bg
 		}

src/gui/base/List.ts

@@ -231,14 +231,13 @@ export class List<T, VH extends ViewHolder<T>> implements ClassComponent<ListAtt
 	}
 
 	private createRow(attrs: ListAttrs<T, VH>, rows: ListRow<T, VH>[]) {
-		return m("li.list-row", {
+		return m("li.list-row.nofocus", {
 			draggable: attrs.renderConfig.dragStart ? "true" : undefined,
 			tabindex: TabIndex.Default,
 			oncreate: (vnode: VnodeDOM) => {
 				const dom = vnode.dom as HTMLElement
-				const r = attrs.renderConfig.createElement(dom)
 				const row = {
-					row: r,
+					row: attrs.renderConfig.createElement(dom),
 					domElement: dom,
 					top: -1,
 					entity: null,
@@ -405,7 +404,6 @@ export class List<T, VH extends ViewHolder<T>> implements ClassComponent<ListAtt
 		for (const row of this.rows) {
 			row.top = nextPosition
 			nextPosition += rowHeight
-
 			const pos = row.top / rowHeight
 			const item = attrs.state.items[pos]
 			row.entity = item
@@ -417,6 +415,10 @@ export class List<T, VH extends ViewHolder<T>> implements ClassComponent<ListAtt
 				row.domElement.style.transform = `translateY(${row.top}px)`
 				row.row.update(item, attrs.state.selectedItems.has(item), attrs.state.inMultiselect)
 			}
+			// Focus the selected row so it can receive keyboard events
+			if (attrs.state.selectedItems.has(item)) {
+				row.domElement.focus()
+			}
 		}
 		this.updateStatus(attrs.state.loadingStatus)