feat(search): ✨ clean up HTML structure

resources/skins.citizen.search/htmlHelper.js

@@ -31,7 +31,7 @@ function htmlHelper() {
 		 * @return {HTMLElement|void}
 		 */
 		getItemGroupElement: function ( data ) {
-			const itemGroup = document.createElement( 'li' );
+			const itemGroup = document.createElement( 'div' );
 			itemGroup.classList.add( 'citizen-typeahead-item-group' );
 			itemGroup.setAttribute( 'data-mw-citizen-typeahead-group', `${ data.id }` );
 			itemGroup.setAttribute( 'role', 'presentation' );

resources/skins.citizen.search/skins.citizen.search.less

@@ -5,12 +5,15 @@
 	display: flex;
 	flex-direction: column;
 	gap: var( --space-xs );
-	margin: 0;
-	list-style: none;
 	border-bottom-right-radius: var( --border-radius-medium );
 	border-bottom-left-radius: var( --border-radius-medium );
 
-	> li {
+	ol {
+		margin: 0;
+		list-style: none;
+	}
+
+	> .citizen-typeahead-item-group {
 		&:first-of-type {
 			margin-top: var( --space-xxs );
 		}
@@ -55,11 +58,6 @@
 
 	&-item {
 		&-group {
-			&-list {
-				margin: 0;
-				list-style: none;
-			}
-
 			// FIXME: Use a generic attribute
 			&[ data-mw-citizen-typeahead-group='action' ] .citizen-typeahead-item-group-list {
 				display: flex;

resources/skins.citizen.search/templates/TypeaheadElement.mustache

@@ -3,7 +3,7 @@
 	string msg-citizen-search-toggle Search toggle label
 }}
 
-<ol id="searchform-suggestions" class="citizen-typeahead" role="listbox">
+<div id="searchform-suggestions" class="citizen-typeahead" role="listbox">
 	{{! Template }}
 	<template id="citizen-typeahead-template">
 		<li class="citizen-typeahead__item">
@@ -22,4 +22,4 @@
 			</a>
 		</li>
 	</template>
-</ol>
+</div>

resources/skins.citizen.search/typeahead.js

@@ -11,6 +11,8 @@ const searchHistory = require( './searchHistory.js' )( config );
 const searchResults = require( './searchResults.js' )();
 const searchQuery = require( './searchQuery.js' )();
 
+const templateTypeaheadElement = require( './templates/TypeaheadElement.mustache' );
+
 const typeahead = {
 	/** @type {HTMLElement | undefined} */
 	element: undefined,
@@ -310,12 +312,13 @@ const typeahead = {
 			} );
 	},
 	init: function ( formEl, inputEl ) {
-		const template = mw.template.get( 'skins.citizen.search', 'resources/skins.citizen.search/templates/typeahead.mustache' );
+		this.mustacheCompiler = mw.template.getCompiler( 'mustache' );
+		const compiledTemplateTypeaheadElement = this.mustacheCompiler.compile( templateTypeaheadElement );
 		const data = {
 			'msg-searchsuggest-search': mw.message( 'searchsuggest-search' ).text(),
 			'msg-citizen-search-empty-desc': mw.message( 'citizen-search-empty-desc' ).text()
 		};
-		this.element = template.render( data ).get()[ 1 ];
+		this.element = compiledTemplateTypeaheadElement.render( data ).get()[ 1 ];
 		formEl.after( this.element );
 
 		this.form.init( formEl );

skin.json

@@ -201,9 +201,6 @@
 		},
 		"skins.citizen.search": {
 			"es6": true,
-			"templates": [
-				"resources/skins.citizen.search/templates/typeahead.mustache"
-			],
 			"styles": [
 				"resources/skins.citizen.search/skins.citizen.search.less"
 			],
@@ -214,6 +211,11 @@
 					"callback": "MediaWiki\\Skins\\Citizen\\Hooks\\ResourceLoaderHooks::getCitizenSearchResourceLoaderConfig"
 				},
 				"resources/skins.citizen.search/typeahead.js",
+				{
+					"name": "resources/skins.citizen.search/templates/TypeaheadElement.mustache",
+					"file": "resources/skins.citizen.search/templates/TypeaheadElement.mustache",
+					"type": "text"
+				},
 				"resources/skins.citizen.search/htmlHelper.js",
 				"resources/skins.citizen.search/fetch.js",
 				"resources/skins.citizen.search/searchAction.js",
@@ -240,6 +242,7 @@
 			],
 			"dependencies": [
 				"mediawiki.storage",
+				"mediawiki.template.mustache",
 				"mediawiki.user",
 				"mediawiki.util"
 			],