From 88d1aafe28eff33a766e59dd0d9d7088e353e8ab Mon Sep 17 00:00:00 2001
From: ccd0 <admin@containerchan.org>
Date: Fri, 17 Apr 2015 00:46:23 -0700
Subject: [PATCH] Start working on keyboard navigation in image captcha.

Still having some issues with focusing in Firefox.
---
 package.json                  |  1 +
 src/General/lib/$.coffee      |  2 +-
 src/Posting/Captcha.v2.coffee | 31 ++++++++++++++++++++++++-------
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 37705148f..a685dcd69 100755
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
       "*://a.4cdn.org/*",
       "*://i.4cdn.org/*",
       "https://www.google.com/recaptcha/api2/anchor?k=6Ldp2bsSAAAAAAJ5uyx_lx34lJeEpTLVkP5k04qc*",
+      "https://www.google.com/recaptcha/api2/frame?*&k=6Ldp2bsSAAAAAAJ5uyx_lx34lJeEpTLVkP5k04qc*",
       "*://www.google.com/recaptcha/api/fallback?k=6Ldp2bsSAAAAAAJ5uyx_lx34lJeEpTLVkP5k04qc"
     ],
     "suffix": {
diff --git a/src/General/lib/$.coffee b/src/General/lib/$.coffee
index dc8bdfcc4..04ca0b1e6 100755
--- a/src/General/lib/$.coffee
+++ b/src/General/lib/$.coffee
@@ -125,8 +125,8 @@ $.onExists = (root, selector, subtree, cb) ->
 
 $.addStyle = (css, id, test) ->
   style = $.el 'style',
-    id: id
     textContent: css
+  style.id = id if id?
   $.asap (-> d.head and (!test? or test())), ->
     $.add d.head, style
   style
diff --git a/src/Posting/Captcha.v2.coffee b/src/Posting/Captcha.v2.coffee
index 4c4238b4a..0c7cf19ba 100644
--- a/src/Posting/Captcha.v2.coffee
+++ b/src/Posting/Captcha.v2.coffee
@@ -26,13 +26,30 @@ Captcha.v2 =
       $.queueTask => @save false
 
   initFrame: ->
-    $.onExists d.body, '#recaptcha-anchor', true, (checkbox) ->
-      focus = ->
-        if d.hasFocus() and d.activeElement isnt checkbox
-          checkbox.focus()
-      focus()
-      $.on window, 'focus', ->
-        $.queueTask focus
+    @initFrame2[location.pathname.split('/')[3]]()
+
+  initFrame2:
+    anchor: ->
+      $.onExists d.body, '#recaptcha-anchor', true, (checkbox) ->
+        focus = ->
+          if d.hasFocus() and d.activeElement isnt checkbox
+            checkbox.focus()
+        focus()
+        $.on window, 'focus', ->
+          $.queueTask focus
+
+    frame: ->
+      selector = '.rc-imageselect-target > .rc-imageselect-tile > img'
+      $.addStyle "#{selector}:focus {outline: 2px solid #4a90e2;}"
+      fixImages = ->
+        return unless (images = $$ selector).length
+        focus = images[0].tabIndex isnt 0
+        for img in images
+          img.tabIndex = 0
+        if focus
+          images[0].focus()
+      fixImages()
+      new MutationObserver(fixImages).observe d.body, {childList: true, subtree: true}
 
   shouldFocus: false
   timeouts: {}