Updating JS and HTML for accessibility.

desirepath41 · Jul 13, 2015 · d72ba7e · d72ba7e
1 parent 33405e7
commit d72ba7e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/django-project/public/index.html b/django-project/public/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="keywords" content="visualcaptcha, captcha, django, python, vanilla, vanilla js, turing test, mobile-friendly, accessible, accessibility, retina-friendly, better captcha, fancy captcha, captcha alternative, demo">
     <meta name="description" content="A cool visual captcha Vanilla JS plugin. Mobile-friendly. Retina-ready. Accessible.">
-    
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <!-- Mobile Specific Metas -->
@@ -43,11 +43,11 @@ <h1>Fill in the form and submit it</h1>
                     <input type="text" class="form-control" placeholder="Name">
                     <div id="status-message"></div>
                     <div id="sample-captcha"></div>
-                    <a id="check-is-filled" class='info-btn'>Check if visualCaptcha is filled</a>
+                    <a href="#" id="check-is-filled" class='info-btn'>Check if visualCaptcha is filled</a>
                     <button type="submit" name="submit-bt" class="submit">Submit form</button>
                 </form>
             </div>
-        </div> 
+        </div>
         <div class="links">
             <p class="txt-center">
                 <a href="/" target="_blank"><b>visualCaptcha</b></a> by <a href="http://emotionloop.com/" target="_blank"><b>emotionLoop</b></a>

diff --git a/django-project/public/js/main.js b/django-project/public/js/main.js
@@ -2,7 +2,20 @@
     var captcha = visualCaptcha( 'sample-captcha', {
         imgPath: 'img/',
         captcha: {
-            numberOfImages: 5
+            numberOfImages: 5,
+            callbacks: {
+                loaded: function( captcha ) {
+                    // Avoid adding the hashtag to the URL when clicking/selecting visualCaptcha options
+                    var anchorOptions = document.getElementById( 'sample-captcha' ).getElementsByTagName( 'a' );
+                    var anchorList = Array.prototype.slice.call( anchorOptions );// .getElementsByTagName does not return an actual array
+                    anchorList.forEach( function( anchorItem ) {
+                        _bindClick( anchorItem, function( event ) {
+                            event.preventDefault();
+                        });
+                    });
+                }
+            }
+
         }
     } );
 
@@ -37,7 +50,9 @@
     };
 
     // Show an alert saying if visualCaptcha is filled or not
-    var _sayIsVisualCaptchaFilled = function() {
+    var _sayIsVisualCaptchaFilled = function( event ) {
+        event.preventDefault();
+
         if ( captcha.getCaptchaData().valid ) {
             window.alert( 'visualCaptcha is filled!' );
         } else {