Fix course cards links are duplicated (#2777)

* Add aria-hidden/tabindex/role attribute to post featured image block

* Apply to all related card template parts

* Apply to my courses page content pattern

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

@@ -5,6 +5,7 @@
 use function WPOrg_Learn\Sensei\{get_my_courses_page_url, get_lesson_has_published_course};
 
 // Block files
+require_once __DIR__ . '/src/card-featured-image-a11y/index.php';
 require_once __DIR__ . '/src/code/index.php';
 require_once __DIR__ . '/src/course-grid/index.php';
 require_once __DIR__ . '/src/course-outline/index.php';

wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/block.json

@@ -0,0 +1,4 @@
+{
+	"name": "wporg-learn/card-featured-image-a11y",
+	"viewScript": "file:./view.js"
+}

wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/index.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Adds aria labels to the post featured image block in the card course template.
+ */
+
+namespace WordPressdotorg\Theme\Learn_2024\Card_Featured_Image_A11y;
+
+defined( 'WPINC' ) || die();
+
+/**
+ * Actions and filters.
+ */
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Add the scripts to update the post featured image block in the card course template.
+ *
+ * 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/card-featured-image-a11y/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 when one of the card templates is on the page.
+	add_action(
+		'render_block_core/template-part',
+		function( $block_content, $block ) use ( $script_handle ) {
+			$slugs = array( 'card-course-h3', 'card-course', 'card-lesson-h3', 'card-lesson', 'card' );
+			if ( isset( $block['attrs']['slug'] ) && in_array( $block['attrs']['slug'], $slugs, true ) ) {
+				wp_enqueue_script( $script_handle );
+			}
+			return $block_content;
+		},
+		10,
+		2
+	);
+
+	// Enqueue the assets when the my courses page content pattern is on the page.
+	// The blocks composition of this pattern is similar to that of the card course.
+	add_action(
+		'render_block_core/pattern',
+		function( $block_content, $block ) use ( $script_handle ) {
+			if ( isset( $block['attrs']['slug'] ) && 'wporg-learn-2024/page-my-courses-content' === $block['attrs']['slug'] ) {
+				wp_enqueue_script( $script_handle );
+			}
+			return $block_content;
+		},
+		10,
+		2
+	);
+}

wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/view.js

@@ -0,0 +1,26 @@
+function init() {
+	/**
+	 * Enhance the accessibility of the card course template.
+	 *
+	 * This function adds an `aria-hidden="true"` and `tabindex="-1"`
+	 * to the post featured image block in the card course template.
+	 */
+	function enhanceCardCourseAccessibility() {
+		document
+			.querySelectorAll( '.wporg-learn-card-grid figure.wp-block-post-featured-image > a' )
+			.forEach( ( featuredImgLink ) => {
+				featuredImgLink.setAttribute( 'aria-hidden', 'true' );
+				featuredImgLink.setAttribute( 'tabindex', '-1' );
+
+				const featuredImg = featuredImgLink.querySelector( 'img' );
+				if ( featuredImg ) {
+					featuredImg.setAttribute( 'role', 'presentation' );
+					featuredImg.setAttribute( 'alt', '' );
+				}
+			} );
+	}
+
+	enhanceCardCourseAccessibility();
+}
+
+document.addEventListener( 'DOMContentLoaded', init );