From 7a5c1222ca9ba31d65e0306233e44e06efa75376 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Sat, 17 Dec 2022 17:36:45 -0800
Subject: [PATCH] assign alt properties

---
 index.html          | 12 ++++++------
 scripts/elements.js |  3 +++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 5466384..13da2f6 100644
--- a/index.html
+++ b/index.html
@@ -21,33 +21,33 @@
 					<p id="instance-name"></p>
 				</div>
 				<div>
-					<img id="node-status">
+					<img id="node-status" alt="instance node">
 					<p id="node-name"></p>
 				</div>
 			</div>
 			<hr>
 			<div>
 				<div>
-					<img src="images/resources/cpu.svg">
+					<img src="images/resources/cpu.svg" alt="instance processor cores">
 					<p id="resource-cpu"></p>
 				</div>
 				<div>
-					<img src="images/resources/ram.svg">
+					<img src="images/resources/ram.svg" alt="instance memory">
 					<p id="resource-ram"></p>
 				</div>
 				<div>
-					<img src="images/resources/swap.svg">
+					<img src="images/resources/swap.svg" alt="instance swap space">
 					<p id="resource-swap"></p>
 				</div>
 				<div>
-					<img src="images/resources/disk.svg">
+					<img src="images/resources/disk.svg" alt="instance disk space">
 					<p id="resource-disk"></p>
 				</div>
 			</div>
 			<hr>
 			<div class="btn-group">
 				<img id="power-btn">
-				<img id="configure-btn">
+				<img id="configure-btn" alt="change instance configuration">
 			</div>
 		</article>
 	</template>
diff --git a/scripts/elements.js b/scripts/elements.js
index 6624f00..0d85786 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -29,6 +29,7 @@ class Instance extends HTMLElement {
 	set data (data) {
 		let typeImg = this.shadowElement.querySelector("#instance-type");
 		typeImg.src = `images/instances/${data.type}/${data.status}.svg`;
+		typeImg.alt = `${data.status} instance`;
 		this.type = data.type;
 		this.status = data.status;
 
@@ -60,6 +61,7 @@ class Instance extends HTMLElement {
 
 		let powerButton = this.shadowElement.querySelector("#power-btn");
 		powerButton.src = data.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
+		powerButton.alt = data.status === "running" ? "shutdown instance" : "start instance";
 		powerButton.addEventListener("click", async () => {
 			let targetAction = this.status === "running" ? "shutdown" : "start";
 			let targetStatus = this.status === "running" ? "stopped" : "running";
@@ -81,6 +83,7 @@ class Instance extends HTMLElement {
 
 			let powerButton = this.shadowElement.querySelector("#power-btn");
 			powerButton.src = this.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
+			powerButton.alt = this.status === "running" ? "shutdown instance" : "start instance";
 		});
 	
 		let configButton = this.shadowElement.querySelector("#configure-btn");