From c9939a83e72beb32dd1e11b07139714e2ae91623 Mon Sep 17 00:00:00 2001
From: Jo-Philipp Wich <jo@mein.io>
Date: Sun, 5 Feb 2023 19:41:20 +0100
Subject: [PATCH] luci-base: ui.js: modal dialog tweaks

 - Automatically focus modal dialog frame
 - Close modal dialog on pressing escape key

Fixes: #4609, #6205
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
---
 .../htdocs/luci-static/resources/ui.js        | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 450cb655c6..51b6c0902d 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -3486,8 +3486,17 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
 var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
 	__init__: function() {
 		modalDiv = document.body.appendChild(
-			dom.create('div', { id: 'modal_overlay' },
-				dom.create('div', { class: 'modal', role: 'dialog', 'aria-modal': true })));
+			dom.create('div', {
+				id: 'modal_overlay',
+				tabindex: -1,
+				keydown: this.cancelModal
+			}, [
+				dom.create('div', {
+					class: 'modal',
+					role: 'dialog',
+					'aria-modal': true
+				})
+			]));
 
 		tooltipDiv = document.body.appendChild(
 			dom.create('div', { class: 'cbi-tooltip' }));
@@ -3551,6 +3560,7 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
 
 		document.body.classList.add('modal-overlay-active');
 		modalDiv.scrollTop = 0;
+		modalDiv.focus();
 
 		return dlg;
 	},
@@ -3567,6 +3577,17 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
 	 */
 	hideModal: function() {
 		document.body.classList.remove('modal-overlay-active');
+		modalDiv.blur();
+	},
+
+	/** @private */
+	cancelModal: function(ev) {
+		if (ev.key == 'Escape') {
+			var btn = modalDiv.querySelector('.right > button, .right > .btn');
+
+			if (btn)
+				btn.click();
+		}
 	},
 
 	/** @private */