Use standard class and ID for search box

includes/CitizenTemplate.php

@@ -257,10 +257,10 @@ class CitizenTemplate extends BaseTemplate {
 		$config = $this->config;
 		$props = [
 			'form-action' => $config->get( 'Script' ),
-			'html-input' => $this->makeSearchInput( [ 'id' => 'search-input' ] ),
+			'html-input' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ),
 			'html-button-search' => $this->makeSearchButton(
 				'image',
-				[ 'id' => 'search-button',
+				[ 'id' => 'searchButton',
 					'src' => $this->getSkin()->getSkinStylePath( 'resources/images/icons/search.svg' ),
 				]
 			),

includes/templates/Searchbox.mustache

@@ -5,9 +5,9 @@
 	string html-input raw HTML containing the input box of the search box
 	string html-button-search raw HTML containing the button of the search box
 }}
-<form action="{{form-action}}" role="search" id="search-form">
+<form action="{{form-action}}" role="search" id="searchform">
 	<input type="hidden" name="title" value="{{page-title}}">
-	<label class="screen-reader-text" for="search-input">{{msg-search}}</label>
+	<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
 	{{{html-input}}}
 	{{{html-button-search}}}
 </form>

resources/components/darkmode.less

@@ -104,7 +104,7 @@
 	}
 
 	.suggestions-dropdown,
-	#site-search #search-form #search-input {
+	#site-search #searchform #searchInput {
 		background: @dark-bg-50 !important;
 	}
 
@@ -114,7 +114,7 @@
 	}
 
 	.suggestion-link,
-	#site-search #search-form #search-input {
+	#site-search #searchform #searchInput {
 		border-color: @dark-bg-60;
 	}
 

resources/components/search.less

@@ -7,7 +7,7 @@
 
 // TODO: Make it configurable and flexible
 #site-search {
-	#search-form {
+	#searchform {
 		position: absolute;
 		z-index: -1; // Not interactable
 		margin: 7px 0 8px; // 1px h3 screen reader
@@ -19,7 +19,7 @@
 		transition: @transition-opacity;
 
 		// Search field
-		#search-input {
+		#searchInput {
 			-webkit-appearance: none;
 			-moz-appearance: none;
 			appearance: none;
@@ -37,7 +37,7 @@
 		}
 
 		// Search field button
-		#search-button {
+		#searchButton {
 			.button-blue;
 			width: @icon-box-size + @icon-padding * 2;
 			height: 42px;
@@ -102,11 +102,11 @@
 
 	#search-toggle {
 		&:checked {
-			~ #search-form {
+			~ #searchform {
 				z-index: 10;
 				opacity: 1;
 
-				#search-input {
+				#searchInput {
 					width: 400px;
 				}
 			}
@@ -253,7 +253,7 @@ a.suggestion-link:hover {
 // RTL tweaks
 .rtl {
 	#site-search {
-		#search-form {
+		#searchform {
 			left: @icon-box-size + @margin-side + @icon-padding;
 			right: unset;
 		}

resources/scripts/searchfocus.js

@@ -9,7 +9,7 @@
 var searchToggle = document.getElementById( 'search-toggle' );
 
 function searchInputFocus() {
-	var searchInput = document.getElementById( 'search-input' );
+	var searchInput = document.getElementById( 'searchInput' );
 
 	if ( searchToggle.checked !== false ) {
 		searchInput.focus();

resources/scripts/typeahead-init.js

@@ -9,8 +9,8 @@
 ( function ( WMTypeAhead ) {
 
 	let inputEvent,
-		searchInput = document.getElementById( 'search-input' ),
-		typeAhead = new WMTypeAhead( 'search-form', 'search-input' );
+		searchInput = document.getElementById( 'searchInput' ),
+		typeAhead = new WMTypeAhead( 'searchform', 'searchInput' );
 
 	/**
 	 * Testing for 'input' event and falling back to 'propertychange' event for IE.