Merge pull request #4061 from pratu16x7/setup-fixes

[setup] fix keyboard nav

frappe/desk/page/setup_wizard/setup_wizard.js

@@ -84,6 +84,21 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
 		this.container.addClass("container setup-wizard-slide with-form");
 		this.$next_btn.addClass('action');
 		this.$complete_btn = this.$footer.find('.complete-btn').addClass('action');
+		this.setup_keyboard_nav();
+	}
+
+	setup_keyboard_nav() {
+		this.container.on('keydown',  (e) => {
+			if(e.which === 13) {
+				var $target = $(e.target);
+				if($target.hasClass('prev-btn')) {
+					$target.trigger('click');
+				} else {
+					this.container.find('.next-btn').trigger('click');
+					e.preventDefault();
+				}
+			}
+		});
 	}
 
 	before_show_slide() {
@@ -138,6 +153,9 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
 		this.setup();
 
 		this.show_slide(this.current_id);
+		setTimeout(() => {
+			this.container.find('.form-control').first().focus();
+		}, 200);
 		this.in_refresh_slides = false;
 	}
 
@@ -167,7 +185,7 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
 			error: function() {
 				var d = frappe.msgprint(__("There were errors."));
 				d.custom_onhide = function() {
-					$(me.parent).find('.setup-state').remove();
+					$(me.parent).find('.setup-loading').remove();
 					$('body').removeClass('setup-state');
 					me.container.show();
 					frappe.set_route(me.page_name, me.slides.length - 1);
@@ -217,7 +235,7 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
 	}
 
 	get_message(title, message="", loading=false) {
-		return $(`<div data-state="setup">
+		return $(`<div class="setup-loading" data-state="setup">
 			<div class="page-card">
 				<div class="page-card-head">
 					<span class="indicator blue">

frappe/public/js/frappe/ui/slides.js

@@ -228,7 +228,7 @@ frappe.ui.Slides = class Slides {
 	}
 
 	make() {
-		this.container = $('<div>').addClass("slides-wrapper")
+		this.container = $('<div>').addClass("slides-wrapper").attr({"tabindex": -1})
 			.appendTo(this.parent);
 		this.$slide_progress = $(`<div>`).addClass(`slides-progress text-center text-extra-muted`)
 			.appendTo(this.container);