From 1d6b52eeab45bdb2a804d829d941ee00df942655 Mon Sep 17 00:00:00 2001
From: Stephen <stephen@sathomas.me>
Date: Tue, 16 Jun 2015 11:25:09 -0400
Subject: [PATCH 1/4] (issue #13) enable outline for focused buttons

---
 static/css/pad.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/static/css/pad.css b/static/css/pad.css
index 2a7aad4..8801c25 100755
--- a/static/css/pad.css
+++ b/static/css/pad.css
@@ -150,7 +150,12 @@ li[data-key=showusers] > a #online_count {
 
 .toolbar ul li a .buttonicon:focus {
     border: 0;
-    outline: none;
+}
+
+.toolbar ul li select:focus {
+    outline-color: initial;
+    outline-style: auto;
+    outline-width: initial;
 }
 
 /* Additional icons added by OAE */

From 0ab426073a4efc5ffdb36459d7273b145213e055 Mon Sep 17 00:00:00 2001
From: Stephen <stephen@sathomas.me>
Date: Tue, 16 Jun 2015 11:25:29 -0400
Subject: [PATCH 2/4] (issue #13) disable redundant tabindex

---
 static/js/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/js/index.js b/static/js/index.js
index 44764d9..914c763 100755
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -27,6 +27,9 @@ exports.postAceInit = function (hook_name, args, cb) {
     $('#editorcontainerbox').animate({
         'top': '55px',
     }, 500);
+    
+    // Disable tabbing to download link since there's a button within it
+    $('.toolbar [data-key="download"] a').attr('tabindex','-1');
 
     // Enable the spellchecker
     $('iframe[name="ace_outer"]').contents().find('iframe').contents().find('#innerdocbody').attr('spellcheck', 'true');

From f327a89a72f6838048c5aae5ac4c79768a5392a2 Mon Sep 17 00:00:00 2001
From: Stephen <stephen@sathomas.me>
Date: Fri, 10 Jul 2015 09:58:43 -0400
Subject: [PATCH 3/4] (issue #13) add title to extra buttons

---
 static/js/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 914c763..bc22ed8 100755
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -16,8 +16,8 @@ exports.postAceInit = function (hook_name, args, cb) {
     $('.buttonicon-showusers').removeClass('buttonicon-showusers').addClass('buttonicon-oae buttonicon-user');
 
     // Add extra buttons to the toolbar *after* the style select
-    $('ul.menu_left').append('<li data-type="button" data-key="colorcheck"><a class="grouped-left" data-l10n-id="pad.settings.colorcheck" title="Toggle authorship colors"><button class="buttonicon buttonicon-oae buttonicon-clearauthorship"></button></a></li>');
-    $('ul.menu_left').append('<li data-type="button" data-key="download"><a target="_blank" href="' + window.location.pathname + '/export/pdf" class="grouped-right" data-l10n-id="pad.importExport.exportpdf" title="Download"><button class="buttonicon buttonicon-oae buttonicon-download"></button></a></li>');
+    $('ul.menu_left').append('<li data-type="button" data-key="colorcheck"><a class="grouped-left" data-l10n-id="pad.settings.colorcheck" title="Toggle authorship colors"><button class="buttonicon buttonicon-oae buttonicon-clearauthorship" title="Toggle authorship colors"></button></a></li>');
+    $('ul.menu_left').append('<li data-type="button" data-key="download"><a target="_blank" href="' + window.location.pathname + '/export/pdf" class="grouped-right" data-l10n-id="pad.importExport.exportpdf" title="Download"><button class="buttonicon buttonicon-oae buttonicon-download" title="Download"></button></a></li>');
 
     // Show the toolbar
     $('.toolbar').animate({

From 70e1855ac1e995dbbface7fa63a0c0756ef6e18a Mon Sep 17 00:00:00 2001
From: Stephen <stephen@sathomas.me>
Date: Fri, 10 Jul 2015 09:58:57 -0400
Subject: [PATCH 4/4] (issue #13) match focus styles

---
 static/css/pad.css | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/static/css/pad.css b/static/css/pad.css
index 8801c25..a334e16 100755
--- a/static/css/pad.css
+++ b/static/css/pad.css
@@ -73,6 +73,10 @@ li[data-key=showusers] > a #online_count {
     display: none;
 }
 
+.buttonicon:focus {
+    border: none !important;
+}
+
 /* Restyle the toolbar */
 .toolbar {
     background: transparent;
@@ -144,18 +148,16 @@ li[data-key=showusers] > a #online_count {
     width: 25px;
 }
 
-.toolbar ul li a:hover .buttonicon {
-    color: #999;
-}
-
+.toolbar ul li a:hover .buttonicon,
 .toolbar ul li a .buttonicon:focus {
-    border: 0;
+    color: #999;
 }
 
+.toolbar ul li a .buttonicon:focus,
 .toolbar ul li select:focus {
-    outline-color: initial;
-    outline-style: auto;
-    outline-width: initial;
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
 }
 
 /* Additional icons added by OAE */