add meaningful alt text to plants, add keyboard interaction and focus styles

3-terrarium/solution/index.html

@@ -17,48 +17,48 @@
 
 			<div id="left-container" class="container">
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+					<img class="plant" tabindex="0" alt="spindly plant with round leaves" id="plant1" src="./images/plant1.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+					<img class="plant" tabindex="0" alt="succulent with plump leaves" id="plant2" src="./images/plant2.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+					<img class="plant" tabindex="0" alt="pink water lily flower" id="plant3" src="./images/plant3.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+					<img class="plant" tabindex="0" alt="bushy plant with small pink round flowers" id="plant4" src="./images/plant4.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+					<img class="plant" tabindex="0" alt="branch with long, thin blue leaves" id="plant5" src="./images/plant5.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+					<img class="plant" tabindex="0" alt="branch with long green leaves" id="plant6" src="./images/plant6.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+					<img class="plant" tabindex="0" alt="succulent with plump finger-like green leaves" id="plant7" src="./images/plant7.png" />
 				</div>
 			</div>
 			<div id="right-container" class="container">
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+					<img class="plant" tabindex="0" alt="ocotillo cactus with red blooms" id="plant8" src="./images/plant8.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+					<img class="plant" tabindex="0" alt="plant with wide pointy grey-green leaves" id="plant9" src="./images/plant9.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+					<img class="plant" tabindex="0" alt="dark green evergreen shrub" id="plant10" src="./images/plant10.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+					<img class="plant" tabindex="0" alt="football-shaped cactus with long thin spines" id="plant11" src="./images/plant11.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+					<img class="plant" tabindex="0" alt="greyish pink air plant" id="plant12" src="./images/plant12.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+					<img class="plant" tabindex="0" alt="prickly pear cactus" id="plant13" src="./images/plant13.png" />
 				</div>
 				<div class="plant-holder">
-					<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+					<img class="plant" tabindex="0" alt="pincushion cactus" id="plant14" src="./images/plant14.png" />
 				</div>
 			</div>
 

3-terrarium/solution/script.js

@@ -27,6 +27,7 @@ function dragElement(terrariumElement) {
 		pos3 = 0,
 		pos4 = 0;
 	terrariumElement.onpointerdown = pointerDrag;
+	terrariumElement.onkeydown = keyboardMove;
 
 	function pointerDrag(e) {
 		e.preventDefault();
@@ -61,4 +62,64 @@ function dragElement(terrariumElement) {
 		document.onpointerup = null;
 		document.onpointermove = null;
 	}
+
+	// keyboard "dragging" functionality
+	// arrow keys move a plant by a small increment
+	// home/end/page up/page down move a plant by a larger increment
+	function keyboardMove(e) {
+		// set movement amounts
+		const smallIncrement = 5;
+		const largeIncrement = 200;
+
+		let diffX = 0;
+		let diffY = 0;
+
+		const { key } = e;
+		let moved = false;
+
+		switch (key) {
+			case 'ArrowLeft':
+				diffX = -1 * smallIncrement;
+				moved = true;
+				break;
+			case 'ArrowRight':
+				diffX = smallIncrement;
+				moved = true;
+				break;
+			case 'ArrowUp':
+				diffY = -1 * smallIncrement;
+				moved = true;
+				break;
+			case 'ArrowDown':
+				diffY = smallIncrement;
+				moved = true;
+				break;
+			case 'Home':
+				diffX = -1 * largeIncrement;
+				moved = true;
+				break;
+			case 'End':
+				diffX = largeIncrement;
+				moved = true;
+				break;
+			case 'PageUp':
+				diffY = -1 * largeIncrement;
+				moved = true;
+				break;
+			case 'PageDown':
+				diffY = largeIncrement;
+				moved = true;
+				break;
+		}
+
+		if (moved) {
+			e.preventDefault();
+			terrariumElement.style.top = terrariumElement.offsetTop + diffY + 'px';
+			terrariumElement.style.left = terrariumElement.offsetLeft + diffX + 'px';
+		}
+	}
 }
+
+// Can you think of ways to improve accessibility?
+// For example, how would someone using a screen reader know to use arrow keys?
+// Or how would you let someone with less dexterity place plants without dragging?

3-terrarium/solution/style.css

@@ -34,9 +34,18 @@ h1 {
 	position: absolute;
 	max-width: 150%;
 	max-height: 150%;
+	border-radius: 50%;
 	z-index: 2;
 }
 
+.plant:focus-visible {
+	/* A transparent outline shows up in Windows High Contrast mode */
+	outline: 4px solid transparent;
+	/* A box shadow makes a pretty focus style, but is invisible in high contrast mode */
+	box-shadow: 0 0 6px 2px #516c16;
+	z-index: 3;
+}
+
 /*https://codepen.io/Rotarepmi/pen/rjpNZY*/
 
 .jar-walls {