Start working on keyboard navigation in image captcha.

Still having some issues with focusing in Firefox.

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": {

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

src/Posting/Captcha.v2.coffee

@@ -26,13 +26,30 @@ Captcha.v2 =
       $.queueTask => @save false
 
   initFrame: ->
-    $.onExists d.body, '#recaptcha-anchor', true, (checkbox) ->
+    @initFrame2[location.pathname.split('/')[3]]()
-      focus = ->
+
-        if d.hasFocus() and d.activeElement isnt checkbox
+  initFrame2:
-          checkbox.focus()
+    anchor: ->
-      focus()
+      $.onExists d.body, '#recaptcha-anchor', true, (checkbox) ->
-      $.on window, 'focus', ->
+        focus = ->
-        $.queueTask 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: {}