Fix 2 filters on same page.

When RW and Faction Member filters are on same page, the `label`
elements that use `id` attribute to map to checkboxes link to the wrong
checkboxes. This removes the `id` attribute usage by placing
the checkboxes inside the label elements.

extension/changelog.json

@@ -3,7 +3,10 @@
 		"version": { "major": 6, "minor": 24, "build": 0 },
 		"title": "Beta",
 		"date": false,
-		"logs": { "features": [], "fixes": [], "changes": [{ "message": "Add possible fix for Job Points tooltip on other icons.", "contributor": "TheFoxMan" }], "removed": [] }
+		"logs": { "features": [], "fixes": [], "changes": [
+			{ "message": "Add possible fix for Job Points tooltip on other icons.", "contributor": "TheFoxMan" },
+			{ "message": "Change filter labels to use inline checkboxes instead of id attribute.", "contributor": "TheFoxMan" }
+		], "removed": [] }
 	},
 	{
 		"version": { "major": 6, "minor": 23, "build": 0 },

extension/scripts/global/elements/checkbox/ttCheckbox.css

@@ -1,4 +1,5 @@
-.tt-checkbox-wrapper {
+.tt-checkbox-wrapper,
+.tt-checkbox-wrapper label {
 	display: inline-flex;
 	align-items: center;
 }
@@ -7,10 +8,14 @@
 	cursor: pointer;
 }
 
-.tt-checkbox-wrapper:not(.reverse-label) > label {
-	margin-left: 2px;
+.tt-checkbox-wrapper.reverse-label label {
+	flex-flow: row-reverse;
 }
 
-.tt-checkbox-wrapper.reverse-label > label {
+.tt-checkbox-wrapper:not(.reverse-label) input {
 	margin-right: 2px;
 }
+
+.tt-checkbox-wrapper.reverse-label input {
+	margin-left: 2px;
+}

extension/scripts/global/elements/checkbox/ttCheckbox.js

@@ -8,15 +8,17 @@ function createCheckbox(options = {}) {
 		...options,
 	};
 
-	const label = options.isHTML
-		? document.newElement({ type: "label", html: options.description, attributes: { for: options.id } })
-		: document.newElement({ type: "label", text: options.description, attributes: { for: options.id } });
-
 	const checkbox = document.newElement({ type: "input", id: options.id, attributes: { type: "checkbox" } });
+	const label = document.newElement({
+		type: "label",
+		[options.isHTML ? "html": "text"]: options.description
+	});
+	label.insertAdjacentElement("afterbegin", checkbox);
+
 	const checkboxWrapper = document.newElement({
 		type: "div",
 		class: `tt-checkbox-wrapper ${options.reverseLabel ? "reverse-label" : ""} ${options.class}`,
-		children: [...(!options.reverseLabel ? [checkbox] : []), label, ...(options.reverseLabel ? [checkbox] : [])],
+		children: [label],
 		events: {
 			click(event) {
 				event.stopPropagation();

extension/scripts/global/functions/filters.css

@@ -123,10 +123,11 @@ body.tt-tablet .tt-filter .content .tt-checkbox-wrapper {
 
 .tt-filter .content .tt-yn-checkboxes > div {
 	display: flex;
+	align-items: center;
 }
 
 .tt-filter .content .tt-yn-checkboxes label {
-	margin: 0 4px;
+	margin-left: 4px;
 }
 
 .tt-filter .content > div {