feat(toc): ✨ drop checkbox hack usage in ToC in favor of dropdown (#894)

Now that ToC is also using the new dropdown system, we can remove all references to the old checkbox hack now.

Fixes: #855

resources/skins.citizen.scripts/dropdown.js

@@ -63,7 +63,7 @@ class Dropdown {
 	 * @param {Event} event
 	 */
 	dismissOnFocusLoss( event ) {
-		if ( !this.details.contains( event.target ) ) {
+		if ( !this.target.contains( event.target ) ) {
 			this.dismiss();
 		}
 	}

resources/skins.citizen.scripts/skin.js

@@ -61,21 +61,17 @@ function main( window ) {
 	const
 		config = require( './config.json' ),
 		search = require( './search.js' ),
-		share = require( './share.js' ),
+		dropdown = require( './dropdown.js' ),
 		stickyHeader = require( './stickyHeader.js' ),
 		lastModified = require( './lastModified.js' ),
-		checkbox = require( './checkbox.js' ),
-		dropdown = require( './dropdown.js' );
+		share = require( './share.js' );
 
 	enableCssAnimations( window.document );
 	search.init( window );
-	share.init();
-	lastModified.init();
-	stickyHeader.init();
-
-	// Set up checkbox hacks
-	checkbox.bind();
 	dropdown.init();
+	stickyHeader.init();
+	lastModified.init();
+	share.init();
 
 	mw.hook( 'wikipage.content' ).add( ( content ) => {
 		// content is a jQuery object
@@ -91,9 +87,6 @@ function main( window ) {
 	registerServiceWorker();
 
 	window.addEventListener( 'beforeunload', () => {
-		// T295085: Close all dropdown menus when page is unloaded to prevent them
-		// from being open when navigating back to a page.
-		checkbox.uncheckCheckboxHacks();
 		// Set up loading indicator
 		document.documentElement.classList.add( 'citizen-loading' );
 	}, false );

resources/skins.citizen.styles/components/Header.less

@@ -27,15 +27,6 @@
 		border-radius: var( --border-radius--small );
 		contain: strict;
 
-		// Used in checkbox hack
-		&Checkbox {
-			position: absolute;
-			display: block;
-			width: inherit;
-			height: inherit;
-			contain: strict;
-		}
-
 		// Pure CSS icons
 		&Icon {
 			width: var( --header-icon-size );
@@ -99,12 +90,6 @@
 		justify-content: space-between;
 		min-width: 0;
 		overflow-x: auto;
-
-		.citizen-menu-checkbox-checkbox:checked {
-			~ .citizen-header__button {
-				background-color: var( --background-color-progressive-subtle );
-			}
-		}
 	}
 
 	&__start,
@@ -193,40 +178,6 @@
 	.citizen-header {
 		transition: var( --transition-menu );
 		transition-property: transform;
-
-		/*
-		 * Add overlay to menus as affordnance
-		 * TODO: We should use JS to add the overlay instead of abusing CSS
-		 * TODO: This does not work for TOC and Pref menu
-		*/
-		.citizen-menu-checkbox-checkbox {
-			~ .citizen-header__button {
-				&::before {
-					position: fixed;
-					inset: 0 0 0 0;
-					z-index: 1;
-					width: auto;
-					height: auto;
-					pointer-events: none;
-					content: '';
-					background-color: var( --background-color-backdrop-light );
-					opacity: 0;
-				}
-			}
-
-			&[ aria-expanded='true' ] {
-				~ .citizen-header__button {
-					contain: initial;
-
-					&::before {
-						pointer-events: auto;
-						opacity: 1;
-						transition: var( --transition-menu );
-						transition-property: opacity;
-					}
-				}
-			}
-		}
 	}
 
 	.citizen-scroll--down .citizen-header {

resources/skins.citizen.styles/components/Menu.less

@@ -92,42 +92,6 @@
 	}
 }
 
-/**
- * Invisible checkbox covering the menu button.
- */
-.citizen-menu-checkbox {
-	// Has to be visible to be focusable
-	&-checkbox {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-		width: 0;
-		height: 0;
-		padding: 0;
-		margin: 0;
-		opacity: 0;
-
-		// HACK: Fake focus styles
-		&:focus {
-			& + .citizen-header__button,
-			& + .citizen-menu-checkbox-button {
-				outline: 2px solid var( --color-progressive );
-				outline-offset: 1px;
-			}
-		}
-	}
-
-	&-button {
-		cursor: pointer;
-
-		// Icons have to use span inside label elements
-		> span:not( .citizen-ui-icon ) {
-			.sr-only;
-		}
-	}
-}
-
 .mw-portlet {
 	// Hide selected item
 	.selected {