From 202cc5a755ebbe965a6ec2c5e189153aaf49db15 Mon Sep 17 00:00:00 2001
From: Ren <18050944+renintw@users.noreply.github.com>
Date: Fri, 26 Jul 2024 08:04:20 +0800
Subject: [PATCH] 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
---
 .../themes/pub/wporg-learn-2024/functions.php |  1 +
 .../src/card-featured-image-a11y/block.json   |  4 ++
 .../src/card-featured-image-a11y/index.php    | 55 +++++++++++++++++++
 .../src/card-featured-image-a11y/view.js      | 26 +++++++++
 4 files changed, 86 insertions(+)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/block.json
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/index.php
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/view.js

diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
index 2b9a1dfc3..eee7095f3 100644
--- a/wp-content/themes/pub/wporg-learn-2024/functions.php
+++ b/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';
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/block.json b/wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/block.json
new file mode 100644
index 000000000..18e9faacb
--- /dev/null
+++ b/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"
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/index.php b/wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/index.php
new file mode 100644
index 000000000..a3eb2d219
--- /dev/null
+++ b/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
+	);
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/view.js b/wp-content/themes/pub/wporg-learn-2024/src/card-featured-image-a11y/view.js
new file mode 100644
index 000000000..c21015df4
--- /dev/null
+++ b/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 );