Keyboard navigation for password format. Minor focus outline crispiness.

Issue #10

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;

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) {