From 50d69fc5fd5075169dfa3a493989d8b686a20b59 Mon Sep 17 00:00:00 2001
From: Ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 1 Aug 2024 00:15:33 +0800
Subject: [PATCH] Course outline block enhance (#2776)

* Make headers collapse/open when clicked anywhere.

* Fix a11y.

* Fix focus ring on lesson item gets hidden.

* Fix the button focus ring size too small on Firefox.

* Remove module heading link.

* Remove the link within the button span with class "screen-reader-text" if it exists
---
 .../src/course-outline/index.js               | 34 +++++++++++++++++++
 .../wporg-learn-2024/src/style/_sensei.scss   | 21 ++++++++----
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js
index a36ecba22..130ddc600 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js
+++ b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js
@@ -4,6 +4,40 @@ import { Icon, drafts, lockOutline } from '@wordpress/icons';
 import { renderToString } from '@wordpress/element';
 
 document.addEventListener( 'DOMContentLoaded', () => {
+	/**
+	 * Allow the entire header to toggle, giving users a larger area to interact with.
+	 */
+	document
+		.querySelectorAll( 'section.wp-block-sensei-lms-course-outline-module-bordered > header' )
+		.forEach( ( header ) => {
+			const button = header.querySelector( 'button' );
+			header.addEventListener( 'click', () => {
+				button.click();
+			} );
+
+			button.addEventListener( 'click', ( event ) => {
+				event.stopPropagation();
+			} );
+
+			// To enable the entire header to be clickable for toggling without conflicts, remove the link.
+			// In fact, this link duplicates the first lesson link in the course outline.
+			// See https://github.com/WordPress/Learn/pull/2776#issuecomment-2258308422
+			const link = header.querySelector( 'h2 > a' );
+			if ( link ) {
+				const heading = link.parentElement;
+				heading.innerHTML = link.innerHTML;
+			}
+			// Also remove the link within the span with class "screen-reader-text" if it exists.
+			const span = header.querySelector( 'span.screen-reader-text' );
+			if ( span ) {
+				const spanLink = span.querySelector( 'a' );
+				if ( spanLink ) {
+					const spanContent = spanLink.innerHTML;
+					span.innerHTML = spanContent;
+				}
+			}
+		} );
+
 	/**
 	 * Find all in progress lessons, and replace the status icon with the Gutenberg-style `drafts` icon.
 	 */
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
index 6453d7eec..7c395d3cd 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
@@ -138,7 +138,9 @@ body.sensei {
 			header {
 				background-color: var(--wp--preset--color--light-grey-2) !important;
 				color: var(--wp--preset--color--charcoal-1) !important;
-				padding: var(--wp--preset--spacing--20);
+				padding-left: var(--wp--preset--spacing--20);
+				padding-right: var(--wp--preset--spacing--20);
+				cursor: pointer;
 
 				h2 {
 					font-size: var(--wp--preset--font-size--heading-6);
@@ -160,19 +162,26 @@ body.sensei {
 						margin: 4px 8px;
 					}
 				}
-			}
 
-			.wp-block-sensei-lms-course-outline-module__lessons-title {
-				display: none;
+				button.wp-block-sensei-lms-course-outline__arrow {
+					height: 32px;
+					align-items: center;
+				}
 			}
 
 			.wp-block-sensei-lms-collapsible {
+				overflow: unset;
+
+				h3.wp-block-sensei-lms-course-outline-module__lessons-title {
+					display: none;
+				}
+
 				// lesson item that belongs to a module
-				> .wp-block-sensei-lms-course-outline-lesson:first-of-type {
+				> a.wp-block-sensei-lms-course-outline-lesson:first-of-type {
 					padding-top: 5px;
 				}
 
-				> .wp-block-sensei-lms-course-outline-lesson:last-of-type {
+				> a.wp-block-sensei-lms-course-outline-lesson:last-of-type {
 					padding-bottom: 5px;
 				}
 			}