feat: enhance setup wizard with progress indicators and improve admin notifications

Author: ajaydsouza

includes/admin/class-setup-wizard.php

@@ -198,10 +198,15 @@ public function render_wizard() {
 	 * @return void
 	 */
 	public function setup_wizard_steps() {
-		$output_steps = $this->steps;
+		$output_steps     = $this->steps;
+		$total_steps      = count( $output_steps );
+		$current_step_num = array_search( $this->current_step, array_keys( $this->steps ), true ) + 1;
+		$progress_percent = ( $current_step_num / $total_steps ) * 100;
 		?>
-		<ol class="wzkb-setup-steps" role="tablist" aria-label="<?php esc_attr_e( 'Setup Wizard Steps', 'knowledgebase' ); ?>">
+		<ol class="wzkb-setup-steps" role="tablist" aria-label="<?php esc_attr_e( 'Setup Wizard Steps', 'knowledgebase' ); ?>" aria-valuenow="<?php echo esc_attr( (string) $current_step_num ); ?>" aria-valuemin="1" aria-valuemax="<?php echo esc_attr( (string) $total_steps ); ?>">
 			<?php
+			/* translators: 1: Current step number, 2: Total steps, 3: Progress percentage */
+			echo '<span class="screen-reader-text">' . esc_html( sprintf( __( 'Step %1$d of %2$d (%3$d%% complete)', 'knowledgebase' ), $current_step_num, $total_steps, round( $progress_percent ) ) ) . '</span>';
 			foreach ( $output_steps as $step_key => $step ) {
 				$is_completed = array_search( $this->current_step, array_keys( $this->steps ), true ) > array_search( $step_key, array_keys( $this->steps ), true );
 				$aria_current = $step_key === $this->current_step ? ' aria-current="step"' : '';

includes/admin/css/wizard.css

@@ -526,23 +526,23 @@
 		flex-direction: column;
 		gap: 15px;
 	}
-	
+
 	.wzkb-setup-next-actions-horizontal li {
 		min-width: auto;
 	}
-	
+
 	.wzkb-setup-pro-actions {
 		flex-direction: column;
 	}
-	
+
 	.wzkb-setup-pro-actions li {
 		min-width: auto;
 	}
-	
+
 	.wzkb-setup-resource-links {
 		flex-direction: column;
 	}
-	
+
 	.wzkb-setup-resource-links li {
 		min-width: auto;
 	}

includes/admin/js/admin-scripts.js

@@ -15,18 +15,42 @@ jQuery(document).ready(
 				security: WZKBAdminData.security
 			}, function (response) {
 				if (response.success) {
-					alert(WZKBAdminData.strings.success_message);
+					// Use WordPress admin notice instead of alert().
+					showAdminNotice(WZKBAdminData.strings.success_message, 'success');
 				} else {
-					alert(WZKBAdminData.strings.fail_message);
+					showAdminNotice(WZKBAdminData.strings.fail_message, 'error');
 				}
 			}).fail(function (jqXHR, textStatus) {
-				alert(WZKBAdminData.strings.fail_message);
+				showAdminNotice(WZKBAdminData.strings.fail_message, 'error');
 				console.log(WZKBAdminData.strings.request_fail_message + textStatus);
 			}).always(function () {
 				$button.prop('disabled', false).find('.spinner').remove();
 			});
 		}
 
+		// Function to show WordPress admin notices.
+		function showAdminNotice(message, type) {
+			var noticeClass = type === 'success' ? 'notice-success' : 'notice-error';
+			var $notice = $('<div class="notice ' + noticeClass + ' is-dismissible"><p>' + message + '</p></div>');
+		
+			// Insert notice after the first h1 or h2 in the page.
+			if ($('.wrap > h1, .wrap > h2').length) {
+				$('.wrap > h1, .wrap > h2').first().after($notice);
+			} else {
+				$('.wrap').prepend($notice);
+			}
+		
+			// Scroll to notice.
+			$('html, body').animate({ scrollTop: $notice.offset().top - 100 }, 300);
+		
+			// Auto-dismiss after 5 seconds.
+			setTimeout(function() {
+				$notice.fadeOut(300, function() {
+					$(this).remove();
+				});
+			}, 5000);
+		}
+
 		// Prompt the user when they leave the page without saving the form.
 		var formmodified = 0;
 

includes/admin/js/admin-scripts.min.js

@@ -17,6 +17,7 @@
 	wp_enqueue_style( 'wz-knowledgebase-styles' );
 }
 ?>
+<a href="#main" class="skip-link screen-reader-text"><?php esc_html_e( 'Skip to content', 'knowledgebase' ); ?></a>
 <div class="wrap">
 	<div id="wzkb-content-primary" class="content-area">
 		<main id="main" class="site-main" role="main">

includes/frontend/templates/archive-wz_knowledgebase.php

@@ -17,6 +17,7 @@
 	wp_enqueue_style( 'wz-knowledgebase-styles' );
 }
 ?>
+<a href="#main" class="skip-link screen-reader-text"><?php esc_html_e( 'Skip to content', 'knowledgebase' ); ?></a>
 <div class="wrap">
 	<div id="wzkb-content-primary" class="content-area">
 		<main id="main" class="site-main" role="main">

includes/frontend/templates/single-wz_knowledgebase.php

@@ -26,6 +26,7 @@
 
 
 ?>
+<a href="#main" class="skip-link screen-reader-text"><?php esc_html_e( 'Skip to content', 'knowledgebase' ); ?></a>
 <div class="wrap">
 	<div id="wzkb-content-primary" class="content-area">
 		<main id="main" class="site-main" role="main">

includes/frontend/templates/taxonomy-wzkb_category.php

@@ -19,6 +19,7 @@
 	wp_enqueue_style( 'wz-knowledgebase-styles' );
 }
 ?>
+<a href="#main" class="skip-link screen-reader-text"><?php esc_html_e( 'Skip to content', 'knowledgebase' ); ?></a>
 <div class="wrap">
 	<div id="wzkb-content-primary" class="content-area">
 		<main id="main" class="site-main" role="main">