add for attribute to labels

Author: autumn-mck

index.html

@@ -124,7 +124,7 @@
 					</button>
 					<div class="collapsible-content list">
 						<div class="simple-widget">
-							<label>Archive compression level</label>
+							<label for="setting-archive-compression-level">Archive compression level</label>
 							<input
 								type="range"
 								id="setting-archive-compression-level"
@@ -134,11 +134,13 @@
 								value="6" />
 						</div>
 						<div class="simple-widget">
-							<label>Export modified files only (developer)</label>
+							<label for="setting-export-modified-only"
+								>Export modified files only (developer)</label
+							>
 							<input type="checkbox" id="setting-export-modified-only" class="switch" />
 						</div>
 						<div class="simple-widget">
-							<label>Combine packs (experimental!)</label>
+							<label for="setting-combine-packs">Combine packs (experimental!)</label>
 							<input type="checkbox" id="setting-combine-packs" class="switch" />
 						</div>
 					</div>
@@ -155,7 +157,7 @@
 
 			<template id="datapack-template">
 				<div class="datapack">
-					<img />
+					<img alt="" />
 					<div class="name-and-description">
 						<h3 class="name"></h3>
 						<p class="description"></p>
@@ -185,7 +187,7 @@ <h3 class="widget-text">A heading widget...</h3>
 
 				<template id="image-widget-template">
 					<div class="widget image-widget">
-						<img src="" class="widget-image" />
+						<img src="" class="widget-image" alt="" />
 					</div>
 				</template>
 
@@ -239,6 +241,11 @@ <h3 class="widget-text">A heading widget...</h3>
 				<a href="https://github.com/autumn-mck/dptoolkit-web/issues">Report issues</a> &nbsp;∗&nbsp;
 				<a href="https://everloste.github.io/discord">Discord server</a>
 				&nbsp;∗&nbsp;
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+					<path fill="#169B62" d="M4 5C1.791 5 0 6.791 0 9v18c0 2.209 1.791 4 4 4h8V5H4z" />
+					<path fill="#EEE" d="M12 5h12v26H12z" />
+					<path fill="#FF883E" d="M32 5h-8v26h8c2.209 0 4-1.791 4-4V9c0-2.209-1.791-4-4-4z" />
+				</svg>
 				<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 					<path
 						fill="#5BCEFA"

src/config.ts

@@ -51,7 +51,7 @@ export class ConfigClass {
 
 				const widgetText = clone.querySelector(".widget-text") as HTMLElement | null;
 				const inputElement = clone.querySelector(".widget-input") as HTMLInputElement | null;
-				
+
 				if ("text" in element && widgetText) {
 					const sanitized_html = DOMPurify.sanitize(element.text);
 					widgetText.innerHTML = sanitized_html;
@@ -61,7 +61,6 @@ export class ConfigClass {
 					(clone.querySelector(".widget-switch-input") as HTMLInputElement).checked = !(
 						element.value.default == 0
 					);
-
 				} else if (type === "slider" || type === "number") {
 					const widgetValue = clone.querySelector(".widget-value-text") as HTMLElement | null;
 					if (element.value.default !== undefined) {
@@ -82,7 +81,6 @@ export class ConfigClass {
 					}
 
 					inputElement!.addEventListener("input", updateDisplayedValue);
-
 				} else if (type === "image") {
 					const imageFile = await zip.file(element.file)?.async("blob");
 					if (imageFile) {
@@ -92,7 +90,13 @@ export class ConfigClass {
 				}
 
 				// Set input ID
-				if (inputElement) inputElement.id = "widget-input-" + this.datapack_id.toString() + index.toString();
+				if (inputElement) {
+					const id = "widget-input-" + this.datapack_id.toString() + index.toString();
+					const label = clone.querySelector("label") as HTMLLabelElement;
+
+					inputElement.id = id;
+					label.setAttribute("for", id);
+				}
 
 				return clone;
 			})
@@ -261,7 +265,7 @@ function accessorIsValid(accessor: object) {
 function processTransformer(method_input: number | boolean | undefined, slot_values: {[key: string]: any}, transformer: Transformer): DatapackChangeValue {
 
 	if (typeof transformer === "number") {
-		return transformer as number;
+		return transformer;
 	}
 
 	else if (typeof transformer === "string") {

style.css

@@ -46,7 +46,7 @@ a:link {
 	color: var(--accent-color);
 }
 a:visited {
-	color: #dec7fa;
+	color: var(--accent-color);
 }
 
 button,