Made most things reachable with just a keyboard

public_html/css/core.css

@@ -42,7 +42,9 @@ a {
 	text-decoration: none;
 	cursor: pointer; /* for links without [href] */
 }
-
+a:focus {
+	outline: 2px solid #64C2ED;
+}
 a:hover {
 	color: #34B2ED;
 }

public_html/css/forms.css

@@ -129,7 +129,8 @@ input:not([type=button]):not(.tag-real-input):focus {
 
 input[type=radio],
 input[type=checkbox] {
-	display:none;
+	opacity: 0;
+	position: absolute;
 }
 input[type=radio] + label,
 input[type=checkbox] + label {
@@ -158,10 +159,18 @@ input[type=checkbox] + label::before {
 input[type=checkbox]:checked + label::before {
 	content: "\f046";
 }
+input[type=radio]:focus + label,
+input[type=checkbox]:focus + label {
+	color: #64C2ED;
+}
 
 
 
+.file-handler::before {
+	background: none;
+}
 .file-handler {
+	box-shadow: none;
 	border: 3px dashed #eee;
 	padding: 0.3em 0.5em;
 	line-height: 140% !important;
@@ -169,7 +178,7 @@ input[type=checkbox]:checked + label::before {
 	cursor: pointer;
 }
 .file-handler.active {
-	border-color: #6a2;
+	border-color: #64C2ED;
 	background-color: #eeffcc;
 }
 

public_html/css/post-upload.css

@@ -6,6 +6,7 @@
 
 #post-upload-step1 .file-handler {
 	padding: 3.5em;
+	width: 100%;
 }
 
 #post-upload-step1 .url-handler {

public_html/js/Controls/FileDropper.js

@@ -10,7 +10,7 @@ App.Controls.FileDropper = function($fileInput) {
 		setNames: false,
 	};
 
-	var $dropDiv = jQuery('<div class="file-handler"></div>');
+	var $dropDiv = jQuery('<button class="file-handler"></button>');
 	var allowMultiple = $fileInput.attr('multiple');
 	$dropDiv.html((allowMultiple ? 'Drop files here!' : 'Drop file here!') + '<br/>Or just click on this box.');
 	$dropDiv.insertBefore($fileInput);

public_html/js/Presenters/PagerPresenter.js

@@ -180,8 +180,9 @@ App.Presenters.PagerPresenter = function(
 			}
 			lastPage = page;
 
-			var $a = jQuery('<a/>');
+			var $a = jQuery('<a href="#"/>');
-			$a.click(function() {
+			$a.click(function(e) {
+				e.preventDefault();
 				pager.setPage(page);
 				syncUrl();
 			});

public_html/js/Presenters/TagListPresenter.js

@@ -67,7 +67,7 @@ App.Presenters.TagListPresenter = function(
 	}
 
 	function updateActiveOrder(activeOrder) {
-		$el.find('.order li a').removeClass('active');
+		$el.find('.order li a.active').removeClass('active');
 		$el.find('.order [href*="' + activeOrder + '"]').addClass('active');
 	}
 

public_html/js/Presenters/UserListPresenter.js

@@ -61,12 +61,11 @@ App.Presenters.UserListPresenter = function(
 
 	function render() {
 		$el.html(templates.list());
-		$el.find('.order a').click(orderLinkClicked);
 	}
 
 	function updateActiveOrder(activeOrder) {
-		$el.find('.order li a').removeClass('active');
+		$el.find('.order li a.active').removeClass('active');
-		$el.find('.order [data-order="' + activeOrder + '"]').addClass('active');
+		$el.find('.order [href*="' + activeOrder + '"]').addClass('active');
 	}
 
 	function renderUsers(users, clear) {
@@ -86,14 +85,6 @@ App.Presenters.UserListPresenter = function(
 		});
 	}
 
-	function orderLinkClicked(e) {
-		e.preventDefault();
-		var $orderLink = jQuery(this);
-		var activeSearchOrder = $orderLink.attr('data-order');
-		params.query.order = activeSearchOrder;
-		pagerPresenter.setQuery(params.query);
-	}
-
 	return {
 		init: init,
 		reinit: reinit,

public_html/templates/comment-list-item.tpl

@@ -37,22 +37,22 @@
 
 			<span class="ops"><!--
 				--><% if (canVote) { %><!--
-					--><a class="score-up <% print(comment.ownScore === 1 ? 'active' : '') %>"><!--
+					--><a href="#" class="score-up <% print(comment.ownScore === 1 ? 'active' : '') %>"><!--
 						-->vote up<!--
 					--></a><!--
-					--><a class="score-down <% print(comment.ownScore === -1 ? 'active' : '') %>"><!--
+					--><a href="#" class="score-down <% print(comment.ownScore === -1 ? 'active' : '') %>"><!--
 						-->vote down<!--
 					--></a><!--
 				--><% } %><!--
 
 				--><% if (canEditComment) { %><!--
-					--><a class="edit"><!--
+					--><a href="#" class="edit"><!--
 						-->edit<!--
 					--></a><!--
 				--><% } %><!--
 
 				--><% if (canDeleteComment) { %><!--
-					--><a class="delete"><!--
+					--><a href="#" class="delete"><!--
 						-->delete<!--
 					--></a><!--
 				--><% } %><!--

public_html/templates/post.tpl

@@ -38,18 +38,18 @@
 			<% if (isLoggedIn) { %>
 				<li>
 					<% if (hasFav) { %>
-						<a class="delete-favorite">
+						<a class="delete-favorite" href="#">
 							<i class="fa fa-heart"></i>
 						</a>
 					<% } else { %>
-						<a class="add-favorite">
+						<a class="add-favorite" href="#">
 							<i class="fa fa-heart-o"></i>
 						</a>
 					<% } %>
 				</li>
 
 				<li>
-					<a class="score-up <% print(ownScore === 1 ? 'active' : '') %>">
+					<a class="score-up <% print(ownScore === 1 ? 'active' : '') %>" href="#">
 						<% if (ownScore === 1) { %>
 							<i class="fa fa-thumbs-up"></i>
 						<% } else { %>
@@ -59,7 +59,7 @@
 				</li>
 
 				<li>
-					<a class="score-down <% print(ownScore === -1 ? 'active' : '') %>">
+					<a class="score-down <% print(ownScore === -1 ? 'active' : '') %>" href="#">
 						<% if (ownScore === -1) { %>
 							<i class="fa fa-thumbs-down"></i>
 						<% } else { %>
@@ -197,7 +197,7 @@
 			<ul class="operations">
 				<% if (_.any(editPrivileges)) { %>
 					<li>
-						<a class="edit">
+						<a class="edit" href="#">
 							Edit
 						</a>
 					</li>
@@ -205,7 +205,7 @@
 
 				<% if (privileges.canDeletePosts) { %>
 					<li>
-						<a class="delete">
+						<a class="delete" href="#">
 							Delete
 						</a>
 					</li>
@@ -213,7 +213,7 @@
 
 				<% if (privileges.canFeaturePosts) { %>
 					<li>
-						<a class="feature">
+						<a class="feature" href="#">
 							Feature
 						</a>
 					</li>
@@ -221,7 +221,7 @@
 
 				<% if (privileges.canViewHistory) { %>
 					<li>
-						<a class="history">
+						<a class="history" href="#">
 							History
 						</a>
 					</li>

public_html/templates/user-list.tpl

@@ -1,16 +1,16 @@
 <div id="user-list">
 	<ul class="order">
 		<li>
-			<a class="big-button" data-order="name,asc">Sort A&rarr;Z</a>
+			<a class="big-button" href="#/users/order=name,asc">Sort A&rarr;Z</a>
 		</li>
 		<li>
-			<a class="big-button" data-order="name,desc">Sort Z&rarr;A</a>
+			<a class="big-button" href="#/users/order=name,desc">Sort Z&rarr;A</a>
 		</li>
 		<li>
-			<a class="big-button" data-order="registration_time,asc">Sort old&rarr;new</a>
+			<a class="big-button" href="#/users/order=registration_time,asc">Sort old&rarr;new</a>
 		</li>
 		<li>
-			<a class="big-button" data-order="registration_time,desc">Sort new&rarr;old</a>
+			<a class="big-button" href="#/users/order=registration_time,desc">Sort new&rarr;old</a>
 		</li>
 	</ul>