Correct tab order for toolbar filters

Resolve Issue qunitjs#1428 Issue qunitjs#1428: Tab order for "Module" and "Filter" items is reversed in toolbar
eddylu94 · Jan 31, 2020 · 49ec75f · 49ec75f
1 parent 254fccb
commit 49ec75f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/reporter/html.js b/reporter/html.js
@@ -502,13 +502,22 @@ export function escapeText( s ) {
 		return moduleFilter;
 	}
 
+	function toolbarFilters() {
+		var toolbarFilters = document.createElement( "span" );
+
+		toolbarFilters.id = "qunit-toolbar-filters";
+		toolbarFilters.appendChild( toolbarLooseFilter() );
+		toolbarFilters.appendChild( toolbarModuleFilter() );
+
+		return toolbarFilters;
+	}
+
 	function appendToolbar() {
 		var toolbar = id( "qunit-testrunner-toolbar" );
 
 		if ( toolbar ) {
 			toolbar.appendChild( toolbarUrlConfigContainer() );
-			toolbar.appendChild( toolbarModuleFilter() );
-			toolbar.appendChild( toolbarLooseFilter() );
+			toolbar.appendChild( toolbarFilters() );
 			toolbar.appendChild( document.createElement( "div" ) ).className = "clearfix";
 		}
 	}

diff --git a/src/qunit.css b/src/qunit.css
@@ -105,6 +105,10 @@
 	height: 1.6em;
 }
 
+#qunit-toolbar-filters {
+	float: right;
+}
+
 .qunit-url-config,
 .qunit-filter,
 #qunit-modulefilter {
@@ -114,7 +118,6 @@
 
 .qunit-filter,
 #qunit-modulefilter {
-	float: right;
 	position: relative;
 	margin-left: 1em;
 }