Add a block to enhance the sensei progress bars by adding aria labels

See #2482

wp-content/themes/pub/wporg-learn-2024/functions.php

@@ -12,8 +12,9 @@
 require_once __DIR__ . '/src/learning-pathway-header/index.php';
 require_once __DIR__ . '/src/lesson-grid/index.php';
 require_once __DIR__ . '/src/search-results-context/index.php';
-require_once __DIR__ . '/src/upcoming-online-workshops/index.php';
+require_once __DIR__ . '/src/sensei-progress-bar/index.php';
 require_once __DIR__ . '/src/sidebar-meta-list/index.php';
+require_once __DIR__ . '/src/upcoming-online-workshops/index.php';
 require_once __DIR__ . '/inc/block-config.php';
 require_once __DIR__ . '/inc/block-hooks.php';
 require_once __DIR__ . '/inc/query.php';

wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php

@@ -46,7 +46,7 @@
 
 				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"typography":{"lineHeight":1.6},"layout":{"selfStretch":"fill","flexSize":null}}} /-->
 
-				<!-- wp:sensei-lms/course-progress {"customBarColor":"var(--wp--custom--color--green-50)","height":8,"className":"wporg-learn-sidebar-course-progress"} /-->
+				<!-- wp:sensei-lms/course-progress {"customBarColor":"var(--wp--custom--color--green-50)","height":8} /-->
 
 				<!-- wp:spacer {"height":"0px","style":{"layout":{"selfStretch":"fixed","flexSize":"0px"}}} -->
 				<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>

wp-content/themes/pub/wporg-learn-2024/src/sensei-progress-bar/block.json

@@ -0,0 +1,4 @@
+{
+	"name": "wporg-learn/sensei-progress-bar",
+	"viewScript": "file:./view.js"
+}

wp-content/themes/pub/wporg-learn-2024/src/sensei-progress-bar/index.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Adds aria labels to the Sensei progress bars.
+ */
+
+namespace WordPressdotorg\Theme\Learn_2024\Sensei_Progress_Bar;
+
+defined( 'WPINC' ) || die();
+
+/**
+ * Actions and filters.
+ */
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Add the scripts to update the Sensei progress bar block.
+ *
+ * The dependencies are autogenerated in block.json, and can be read with
+ * `wp_json_file_decode` & `register_block_script_handle.
+ */
+function init() {
+	$metadata_file = dirname( dirname( __DIR__ ) ) . '/build/sensei-progress-bar/block.json';
+	$metadata = wp_json_file_decode( $metadata_file, array( 'associative' => true ) );
+	$metadata['file'] = $metadata_file;
+
+	$script_handle = register_block_script_handle( $metadata, 'viewScript', 0 );
+
+	// Enqueue the assets only when the Sensei progress bar block is on the page.
+	add_action(
+		'render_block_sensei-lms/course-progress',
+		function( $block_content ) use ( $script_handle ) {
+			wp_enqueue_script( $script_handle );
+			return $block_content;
+		}
+	);
+}

wp-content/themes/pub/wporg-learn-2024/src/sensei-progress-bar/view.js

@@ -0,0 +1,27 @@
+function init() {
+	/**
+	 * Enhance the accessibility of the course progress bars.
+	 *
+	 * This function adds an `aria-labelledby` attribute to each progress bar
+	 * to associate it with the label element above
+	 */
+	function enhanceCourseProgressAccessibility() {
+		document.querySelectorAll( '.sensei-progress-bar__bar' ).forEach( ( progressBar, index ) => {
+			const wrapper = progressBar.closest( '.sensei-block-wrapper' );
+
+			if ( wrapper ) {
+				const labelElement = wrapper.querySelector( '.sensei-progress-bar__label' );
+
+				if ( labelElement ) {
+					const id = `sensei-progress-bar__label-${ index }`;
+					labelElement.id = id;
+					progressBar.setAttribute( 'aria-labelledby', id );
+				}
+			}
+		} );
+	}
+
+	enhanceCourseProgressAccessibility();
+}
+
+document.addEventListener( 'DOMContentLoaded', init );