From 1042f54443c5a6f91713d7aa29792c8c39e09116 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Sun, 2 Dec 2018 06:48:18 +0000
Subject: [PATCH] Keyboard navigation for password format. Minor focus outline
 crispiness. Issue #10

---
 passmate.css | 20 ++++++++++++++++----
 passmate.js  | 18 +++++++++++++-----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/passmate.css b/passmate.css
index 087b155..2f72b3c 100644
--- a/passmate.css
+++ b/passmate.css
@@ -78,7 +78,7 @@ overview,product {
 
 	a {
 		margin-bottom: 1em;
-		padding: 0.2em;
+		padding: 0.1em;
 		max-width: 40em;
 		text-decoration: none;
 		color: black;
@@ -93,7 +93,7 @@ overview,product {
 		margin-top: 0.2em;
 		margin-bottom: 0.2em;
 
-		padding: 0.2em;
+		padding: 0.1em;
 	}
 
 	input:focus {
@@ -118,11 +118,15 @@ overview,product {
 		text-align: center;
 	}
 
+	label.recovery {
+		text-align: center;
+	}
+
 	button {
 		/* ugly hack to give the focus box breathing room without moving the text */
 		position: relative;
-		left: -0.2em;
-		padding: 0.2em;
+		left: -0.1em;
+		padding: 0.1em;
 
 		border: none;
 		background: none;
@@ -132,6 +136,14 @@ overview,product {
 		font-weight: bold;
 	}
 
+	button.selectable {
+		font-weight: normal;
+	}
+
+	button.selected {
+		font-weight: bold;
+	}
+
 	ol {
 		box-sizing: border-box;
 		max-width: 40em;
diff --git a/passmate.js b/passmate.js
index 173cf59..7dda78d 100644
--- a/passmate.js
+++ b/passmate.js
@@ -52,13 +52,16 @@ class PassMate {
 
 		let formatStep = this.addElement('li', instr, 'Choose your preferred password format (both provide approximately the same security):');
 		let formats = this.addElement('ul', formatStep);
-		this.format = new Select();
-		this.format.add('short', this.addElement('li', formats, 'Short: 5EQaDfNS'));
-		this.format.add('readable', this.addElement('li', formats, 'Readable: LeasedBarneyPlays565'));
-		formats.addEventListener('click', () => {
+		this.format = new Select(() => {
 			this.derivePasswords();
 		});
 
+		let shortItem = this.addElement('li', formats);
+		this.format.add('short', this.addElement('button', shortItem, 'Short: 5EQaDfNS'));
+
+		let readableItem = this.addElement('li', formats);
+		this.format.add('readable', this.addElement('button', readableItem, 'Readable: LeasedBarneyPlays565'));
+
 		let printReqStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing. You\'ll need to print with the following settings:');
 		let printreqs = this.addElement('ul', printReqStep);
 		this.addElement('li', printreqs, 'Paper size: Letter');
@@ -81,6 +84,7 @@ class PassMate {
 		this.addElement('blurb', overview, 'A unique code has been generated for you below. It changes every time you refresh this website. If you\'d like to reprint an existing book, change the code below to the one printed on page 3 of your old book. The new book will contain all the same passwords as the old book. This is all done without the code or passwords ever leaving your computer.');
 
 		let recoveryLabel = this.addElement('label', overview, 'Recovery Code');
+		recoveryLabel.classList.add('recovery');
 		this.recoveryIn = this.addElement('input', recoveryLabel);
 		this.recoveryIn.type = 'text';
 		this.recoveryIn.classList.add('recovery');
@@ -390,9 +394,10 @@ class PassMate {
 }
 
 class Select {
-	constructor() {
+	constructor(changeCallback) {
 		this.options = [];
 		this.selected = null;
+		this.changeCallback = changeCallback;
 	}
 
 	add(key, elem) {
@@ -406,6 +411,9 @@ class Select {
 			}
 			elem.classList.add('selected');
 			this.selected = key;
+			if (this.changeCallback) {
+				this.changeCallback();
+			}
 		});
 
 		if (this.options.length == 1) {