From e485d318b72b39a9905f6bf72d5018cc48afaa66 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sat, 25 Oct 2025 05:09:10 -0700
Subject: [PATCH] Desktop: Accessibility: Improve dialog keyboard handling
 (#13536)

---
 packages/app-desktop/gui/DialogButtonRow.tsx       | 14 +++++++++++---
 .../gui/DialogButtonRow/useKeyboardHandler.ts      | 13 +++++++------
 .../gui/NoteContentPropertiesDialog.tsx            |  7 ++++++-
 packages/app-desktop/gui/NotePropertiesDialog.tsx  |  7 ++++++-
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/app-desktop/gui/DialogButtonRow.tsx b/packages/app-desktop/gui/DialogButtonRow.tsx
index edbcbf3bc6..cc623e4e25 100644
--- a/packages/app-desktop/gui/DialogButtonRow.tsx
+++ b/packages/app-desktop/gui/DialogButtonRow.tsx
@@ -51,7 +51,15 @@ export default function DialogButtonRow(props: Props) {
 		if (props.onClick) props.onClick(event);
 	}, [props.onClick]);
 
-	const onKeyDown = useKeyboardHandler({ onOkButtonClick, onCancelButtonClick });
+	const okButtonShow = props.okButtonShow ?? true;
+	const cancelButtonShow = props.cancelButtonShow ?? true;
+	const canClickOk = okButtonShow && !props.okButtonDisabled;
+	const canClickCancel = cancelButtonShow && !props.cancelButtonDisabled;
+
+	const onKeyDown = useKeyboardHandler({
+		onOkButtonClick: canClickOk ? onOkButtonClick : null,
+		onCancelButtonClick: canClickCancel ? onCancelButtonClick : null,
+	});
 
 	const buttonComps = [];
 
@@ -65,7 +73,7 @@ export default function DialogButtonRow(props: Props) {
 		}
 	}
 
-	if (props.okButtonShow !== false) {
+	if (okButtonShow) {
 		buttonComps.push(
 			<button disabled={props.okButtonDisabled} key="ok" style={buttonStyle} onClick={onOkButtonClick} ref={props.okButtonRef} onKeyDown={onKeyDown}>
 				{props.okButtonLabel ? props.okButtonLabel : _('OK')}
@@ -73,7 +81,7 @@ export default function DialogButtonRow(props: Props) {
 		);
 	}
 
-	if (props.cancelButtonShow !== false) {
+	if (cancelButtonShow) {
 		buttonComps.push(
 			<button disabled={props.cancelButtonDisabled} key="cancel" style={{ ...buttonStyle }} onClick={onCancelButtonClick}>
 				{props.cancelButtonLabel ? props.cancelButtonLabel : _('Cancel')}
diff --git a/packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.ts b/packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.ts
index 97be63468e..5ec8f6865c 100644
--- a/packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.ts
+++ b/packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.ts
@@ -2,11 +2,10 @@ import * as React from 'react';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { isInsideContainer } from '@joplin/lib/dom';
 
+type OnButtonClick = ()=> void;
 interface Props {
-	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
-	onOkButtonClick: Function;
-	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
-	onCancelButtonClick: Function;
+	onOkButtonClick: null|OnButtonClick;
+	onCancelButtonClick: null|OnButtonClick;
 }
 
 const globalKeydownHandlers: string[] = [];
@@ -48,15 +47,17 @@ export default (props: Props) => {
 
 		if (!isTopDialog() || isInSubModal(event.target)) return;
 
-		if (event.keyCode === 13) {
+		if (event.keyCode === 13 && props.onOkButtonClick) {
 			if ('nodeName' in event.target && event.target.nodeName === 'INPUT') {
 				const target = event.target as HTMLInputElement;
 
 				if (target.type !== 'button' && target.type !== 'checkbox') {
+					event.preventDefault();
 					props.onOkButtonClick();
 				}
 			}
-		} else if (event.keyCode === 27) {
+		} else if (event.keyCode === 27 && props.onCancelButtonClick) {
+			event.preventDefault();
 			props.onCancelButtonClick();
 		}
 		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
diff --git a/packages/app-desktop/gui/NoteContentPropertiesDialog.tsx b/packages/app-desktop/gui/NoteContentPropertiesDialog.tsx
index 71aaf27b1b..7b7ba8aad3 100644
--- a/packages/app-desktop/gui/NoteContentPropertiesDialog.tsx
+++ b/packages/app-desktop/gui/NoteContentPropertiesDialog.tsx
@@ -172,7 +172,12 @@ export default function NoteContentPropertiesDialog(props: NoteContentProperties
 			<div style={{ ...labelCompStyle, marginTop: 10 }}>
 				{readTimeLabel}
 			</div>
-			<DialogButtonRow themeId={props.themeId} onClick={buttonRow_click} okButtonShow={false} cancelButtonLabel={_('Close')}/>
+			<DialogButtonRow
+				themeId={props.themeId}
+				onClick={buttonRow_click}
+				okButtonShow={false}
+				cancelButtonLabel={_('Close')}
+			/>
 		</Dialog>
 	);
 }
diff --git a/packages/app-desktop/gui/NotePropertiesDialog.tsx b/packages/app-desktop/gui/NotePropertiesDialog.tsx
index ae19e85f51..362dd8298b 100644
--- a/packages/app-desktop/gui/NotePropertiesDialog.tsx
+++ b/packages/app-desktop/gui/NotePropertiesDialog.tsx
@@ -501,7 +501,12 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 				<div role='table' aria-labelledby='note-properties-dialog-title'>
 					{noteComps}
 				</div>
-				<DialogButtonRow themeId={this.props.themeId} okButtonShow={!this.isReadOnly()} okButtonRef={this.okButton} onClick={this.buttonRow_click}/>
+				<DialogButtonRow
+					themeId={this.props.themeId}
+					okButtonShow={!this.isReadOnly()}
+					okButtonRef={this.okButton}
+					onClick={this.buttonRow_click}
+				/>
 			</Dialog>
 		);
 	}