These changes address a keyboard navigation issue which made it impossible to

tab to the "clear all" link. Only CSS was changed save fidel, which needed an
href on the link to allow tabbing to it.  I did not edit source (less,scss)
files.

todo-example/angularjs/main/css/app.css

@@ -240,7 +240,7 @@ html {
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
 /* line 136 */
-#todoapp #todo-stats .todo-clear a:hover {
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
@@ -255,7 +255,7 @@ html {
       #todo-stats .todo-clear a:visited {
         color: #777777;
       }
-      #todo-stats .todo-clear a:hover {
+      #todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
         color: #336699;
       }
 
@@ -286,6 +286,7 @@ html {
  *  Fran�ois 'cahnory' Germain
  */
 .ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
+  position:absolute;
   color:#ffffff;
   cursor:normal;
   display:-moz-inline-stack;
@@ -377,4 +378,4 @@ html {
   -moz-transform:rotate(180deg);
   -khtml-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
-}
\ No newline at end of file
+}

todo-example/angularjs/persistencejs/css/app.css

@@ -240,7 +240,7 @@ html {
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
 /* line 136 */
-#todoapp #todo-stats .todo-clear a:hover {
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
@@ -255,7 +255,7 @@ html {
       #todo-stats .todo-clear a:visited {
         color: #777777;
       }
-      #todo-stats .todo-clear a:hover {
+      #todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
         color: #336699;
       }
 
@@ -377,4 +377,4 @@ html {
   -moz-transform:rotate(180deg);
   -khtml-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
-}
\ No newline at end of file
+}

todo-example/backbone/css/todos.css

@@ -517,7 +517,7 @@ body {
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
 /* line 136 */
-#todoapp #todo-stats .todo-clear a:hover {
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;

todo-example/broke/css/application.css

@@ -149,7 +149,7 @@ body {
   cursor: pointer;
 }
 
-#tasks .clear:hover {
+#tasks .clear:hover, #tasks .clear:focus {
   background: rgba(0, 0, 0, 0.15);
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
@@ -164,4 +164,4 @@ body {
 
 #tasks .count span {
   font-weight: bold;
-}
\ No newline at end of file
+}

todo-example/emberjs/css/todos.css

@@ -305,7 +305,7 @@ body {
 	color: #777777;
 }
 #todo-stats .todo-clear a:hover {
-	color: #336699;
+	color: 336699;
 }
 
 #instructions {
@@ -401,7 +401,7 @@ body {
 	border:0px;
 }
 /* line 136 */
-#todoapp #todo-stats button:hover {
+#todoapp #todo-stats button:hover, #todoapp #todo-stats button:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;

todo-example/fidel/index.html

@@ -65,7 +65,7 @@
       {! } !}
       {! if (done) { !}
         <span class="todo-clear">
-          <a data-action="clearCompleted">
+          <a data-action="clearCompleted" href="#">
             Clear <span class="number-done">{!= done !}</span>
             completed <span class="word-done">{!= done == 1 ? 'item' : 'items' !}</span>
           </a>

todo-example/fidel/stylesheets/todos.css

@@ -517,7 +517,7 @@ body {
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
 /* line 136 */
-#todoapp #todo-stats .todo-clear a:hover {
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;

todo-example/javascriptmvc/todo/todo/production.css

@@ -150,6 +150,13 @@ ul {
 	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
+.todo-clear a:hover, .todo-clear a:focus {
+	background: rgba(0, 0, 0, 0.15);
+}
+#todoapp #todo-stats .todo-clear a:active {
+	position: relative;
+	top: 1px;
+}
 
 
 #credits {
@@ -162,4 +169,4 @@ ul {
 
 #credits a {
     color: #888888;
-}
\ No newline at end of file
+}

todo-example/knockoutjs/css/todos.css

@@ -187,10 +187,11 @@ body {
 	color: #777777;
 	font-size: 12px;
 }
+/* these two rules are overridden below. find ".todo-clear a" */
 #todo-stats .todo-clear a:visited {
 	color: #777777;
 }
-#todo-stats .todo-clear a:hover {
+#todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
 	color: #336699;
 }
 
@@ -383,7 +384,7 @@ body {
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
 /* line 136 */
-#todoapp #todo-stats .todo-clear a:hover {
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;

todo-example/sammyjs/app.css

@@ -417,7 +417,7 @@ body {
 	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
 }
 /* line 136 */
-#todoapp #todo-stats .todo-clear a:hover {
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
 	background: rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;

todo-example/spine/css/application.css

@@ -137,7 +137,9 @@ body {
   cursor: pointer;
 }
 
-#tasks .clear:hover {
+/* focus is actually pointless here as it's not
+   possible to tab to the anchor for some reason */
+#tasks .clear:hover, #tasks .clear:focus {
   background: rgba(0, 0, 0, 0.15);
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
@@ -164,4 +166,4 @@ body {
 
 #credits a {
   color: #888;
-}
\ No newline at end of file
+}

todo-example/yuilibrary/css/style.css

@@ -341,17 +341,52 @@ body {
 #todo-stats .todo-clear {
     float: right;
 }
-#todo-stats .todo-clear a {
+#todo-stats a.todo-clear {
     color: #777777;
     font-size: 12px;
 }
-#todo-stats .todo-clear a:visited {
+#todo-stats a.todo-clear {
     color: #777777;
 }
-#todo-stats .todo-clear a:hover {
+#todo-stats a.todo-clear:hover, #todo-stats a.todo-clear:focus {
     color: #336699;
 }
 
+/* line 125 */
+ #todo-stats a.todo-clear {
+	display: block;
+	line-height: 20px;
+	text-decoration: none;
+	-moz-border-radius: 12px;
+	-webkit-border-radius: 12px;
+	-o-border-radius: 12px;
+	-ms-border-radius: 12px;
+	-khtml-border-radius: 12px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.1);
+	color: #555555;
+	font-size: 11px;
+	margin-top: 8px;
+	padding: 0 10px 1px;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+}
+/* line 136 */
+#todo-stats a.todo-clear:hover, #todo-stats a.todo-clear:focus { 
+	background: rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+/* line 139 */
+#todoapp #todo-stats a.todo-clear:active {
+	position: relative;
+	top: 1px;
+}
+
 
 
 #instructions {