[TOC] Remove pointer-events:none on .sidebar-toc-link

Previously, we relied on setting pointer-events:none on all child
elements of ToC links.

This propagated the click event up to the link itself in Javascript
and allowed us check if an element with the class `.sidebar-toc-link`
was clicked.

Unfortunately as of Chromium 101 this approach causes the entire link
in the sidebar to be unclickable.

Instead, this patch checks if the ToC link or any of it's children
have been clicked (using the less efficient `Element.closest()` ).

Bug: T307271
Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e

resources/skins.vector.es6/tableOfContents.js

@@ -286,9 +286,13 @@ module.exports = function tableOfContents( props ) {
 				/** @type {HTMLElement | null} */ ( e.target.closest( `.${SECTION_CLASS}` ) );
 
 			if ( tocSection && tocSection.id ) {
-				if ( e.target.classList.contains( LINK_CLASS ) ) {
+				// In case section link contains HTML,
+				// test if click occurs on any child elements.
+				if ( e.target.closest( `.${LINK_CLASS}` ) ) {
 					props.onHeadingClick( tocSection.id );
 				}
+				// Toggle button does not contain child elements,
+				// so classList check will suffice.
 				if ( e.target.classList.contains( TOGGLE_CLASS ) ) {
 					props.onToggleClick( tocSection.id );
 				}

resources/skins.vector.styles/components/Sidebar.less

@@ -46,7 +46,7 @@
 			margin-top: @top-margin-sidebar-toc;
 		}
 
-		@media ( max-width: @width-breakpoint-tablet ) {
+		@media ( max-width: @width-breakpoint-desktop ) {
 			.mw-sidebar {
 				margin-top: 0;
 				margin-left: 0;

resources/skins.vector.styles/components/TableOfContents.less

@@ -26,16 +26,15 @@
 		border: 0;
 	}
 
-	.sidebar-toc-link > * {
-		// Prevent click events on the link's contents so that we can use event
-		// delegation and have the target be the anchor element instead.
-		pointer-events: none;
-	}
-
 	.sidebar-toc-numb {
 		display: none;
 	}
 
+	.sidebar-toc-link {
+		word-break: break-word;
+		color: @color-link;
+	}
+
 	.sidebar-toc-text {
 		padding: ~'calc( @{subcategory-padding} / 2 )'  0;
 	}
@@ -131,7 +130,7 @@
 	}
 }
 
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( min-width: @width-breakpoint-desktop ) {
 	.sidebar-toc {
 		display: block;
 	}
@@ -139,7 +138,7 @@
 
 // T300975 following media query for TOC experiment treatment
 // class can be removed once associated A/B test is over.
-@media ( max-width: @width-breakpoint-tablet ) {
+@media ( max-width: @width-breakpoint-desktop ) {
 	.skin-vector-toc-experiment-treatment #toc {
 		display: table;
 	}

resources/skins.vector.styles/layouts/screen.less

@@ -331,7 +331,7 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
 body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
 .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
 .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
-	@media ( min-width: @width-breakpoint-tablet ) {
+	@media ( min-width: @width-breakpoint-desktop ) {
 		margin-left: @margin-toc-start-content;
 	}
 }