a11y: add keyboard operability to interface elements

README.md

@@ -2,11 +2,13 @@
 
 hackrew is a framework for making character creator/dressup game applets a la [picrew](https://picrew.me/). You can check out an online demo [here](https://ksadov.github.io/hackrew/), or see a more complex version on [Neocities](https://cherrvak.neocities.org/furrycreator/index.html). To make your own character creator, fork this repo or download the files and follow the instructions below.
 
+This builder uses hackrew as a base, and implements some accessibility improvements to allow more users to interact with it. 
+
 ## Instructions
 
 ### Step 1: start a web server
 
-The applet won't run correctly unless it's launched from a server. To launch it from your own machine, cd into the hackrew folder, run ./serve.sh (you'll need [Python 3 installed on your machine](https://www.python.org/downloads/)) from the command line and navigate to [http://localhost:8000/](http://localhost:8000/) in your browser. Once you're done developing your character creator, you can host it on a remote server, like Neocities or Github Pages.
+The applet won't run correctly unless it's launched from a server. To launch it from your own machine, cd into the hackrew folder, run `./serve.sh` (you'll need [Python 3 installed on your machine](https://www.python.org/downloads/)) from the command line and navigate to [http://localhost:8000/](http://localhost:8000/) in your browser. Once you're done developing your character creator, you can host it on a remote server, like Neocities or Github Pages.
 
 ### Step 2: specify your parts
 The character creator applet's visual components are comprised of "parts" (ex: "body", "ears", "tail", "accessories"), which have varieties called "items" (ex: the items for ears are "small" and "big"). Each item is represented by a .png image with a transparent background. The applet allows the user to create different characters by layering different item .pngs on top of each other. 
@@ -51,11 +53,10 @@ The script will take a while to run, but at the end you'll have your color varia
 ### Step 4: edit the UI
 To change the colors and graphics of the UI, edit the variables at the top of index.css.
 
-### Step 5: host your applet
+### Step 5: host your avatar builder
 
 The only files that you need to host your applet are index.html, index.css imagemaker.js, and the imagemakerAssets folder. To host on Github pages, fork this repo, customize the files, and follow the intrucutions [here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site).
 
-To host on Neocities, make a new folder to contain your project (in my [example page](https://cherrvak.neocities.org/furrycreator/index.html), the folder is called "furrycreator"). Place the files index.html, index.css and imagemaker.js in this folder. Then place the folder imagemakerAssets in the same directory, but be careful to preserve the subfolder structure: the Neocities drag-and-drop GUI won't preserve the seperate folders for each part, which will break the code, so you're better off making a folder called imagemakerAssets and dragging-and-dropping in each part folder one-by-one. Then your completed applet will be on the page `https://your-neocities-page.neocities.org/your-folder-name/` (ex: https://cherrvak.neocities.org/furrycreator/)
+Since this repo generates a static site, you can turn on Github Pages in the Settings of the Repo and it should automatically deploy for you, detecting the presence of an index.html file. It will host your builder at `yourRepoName.github.io`. You can change the name of your repository to get a URL you like.
 
-## TODO
-- Add item shift button or draggable items?
+Pushing your changes to main will trigger a deploy.

imagemaker.js

@@ -86,7 +86,6 @@ window.addEventListener('load', function(ev) {
      */
     function initButtons() {
 	randomButton.addEventListener('click', randomize);
-	infoButton.addEventListener('click', toggleInfo);
 	paletteButton.addEventListener('click', togglePalette);
 	itemsButton.addEventListener('click', toggleItems);
 	return null;
@@ -107,7 +106,7 @@ window.addEventListener('load', function(ev) {
      function initPalette() {
 	for (let i = 0; i < parts.length; i++) {
 	    for (let j = 0; j < parts[i].colors.length; j++) {
-		let colorElement = document.createElement('li');
+		let colorElement = document.createElement('button');
 		colorElement.style.backgroundColor = "#" + parts[i].colors[j];
 		colorElement.addEventListener('click', function() {
 		    selectColor(i, j);
@@ -226,7 +225,7 @@ window.addEventListener('load', function(ev) {
      */
     function initPartsElements() {
 	for (let i = 0; i < parts.length; i++) {	
-	    let part = document.createElement('li');
+	    let part = document.createElement('button');
 	    let partIcon = document.createElement('img');
 	    partIcon.src = assetsPath + parts[i].folder + "/icon.png";
 	    part.appendChild(partIcon);
@@ -249,7 +248,7 @@ window.addEventListener('load', function(ev) {
 	}
 	for (let i = 0; i < parts.length; i++) {
 	    if (parts[i].noneAllowed) {
-		let noneButton = document.createElement('li');
+		let noneButton = document.createElement('button');
 		let noneButtonIcon = document.createElement('img');
 		noneButtonIcon.src = assetsPath + "none_button.svg";
 		noneButton.appendChild(noneButtonIcon);
@@ -258,7 +257,7 @@ window.addEventListener('load', function(ev) {
 		itemsElements[i][0] = noneButton;
  	    }
 	    for (let j = 0; j < parts[i].items.length; j++) {
-		let item = document.createElement('li');
+		let item = document.createElement('button');
 		let itemIcon = document.createElement('img');
 		itemIcon.id = "icon_" + i.toString() + "_" + j.toString();
 		itemIcon.src = (assetsPath +