From 97cdcc55685a4f9b58df0a0a7305e03018e25080 Mon Sep 17 00:00:00 2001 From: Siddhant Chothe Date: Mon, 16 Sep 2013 00:20:02 +0530 Subject: [PATCH] Fixed the accessible jQuery validations issue. Someone please mark it resolved in issue queue as well. Before that please test this with IE. I have tested only with NVDA and Firefox. --- app/assets/javascripts/topics.js.coffee | 74 +++++++++++++++++++++---- 1 file changed, 63 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/topics.js.coffee b/app/assets/javascripts/topics.js.coffee index 081b5d7..ae7737e 100644 --- a/app/assets/javascripts/topics.js.coffee +++ b/app/assets/javascripts/topics.js.coffee @@ -2,17 +2,69 @@ # All this logic will automatically be available in application.js. # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/ $(document).ready -> - errorElements = $('.content').find('.help-inline').prev() - ul = $('') - errorElements.each (i) -> - span = $(this).next() - labelText = $(this).parent().parent().find('label') - $('
  • ' + labelText.text() + ' ' + '(' + span.text() + ')' + '
  • ').appendTo(ul) - $('#errorcontainer').html(ul) - $('.errorlink').bind 'click', (e)-> - sid = $(this).attr('href').substr(1, $(this).attr('href').length-1) - e.stopPropagation - $('input[id="' + sid + '"]').focus() + + + #error elements test + #alert("error elements:" + $('.content:first .help-inline').size()) + #get the errorElements + errorElements = $('.content:first .help-inline') + + #validate only if errors exist + if(errorElements.length > 0) + #test where error container is + #$("#errorcontainer").html("Here I am") + + #ul element as container for error summary + errorSummaryContainer = $(document.createElement("ul")) + errorSummaryContainer.attr("id","errorlist") + + #append error summary to error container + $("#errorcontainer").append(errorSummaryContainer) + + #Iterate through the error elements to create summary + #test individual error elements + #i = 0 + errorElements.each -> + #Test results for each individual error element + #alert("this is error number " + ++i) + + #individual participents + errorElement = $(this)#Note this singular + inputElement = errorElement.prev()#preventing another call to $(this) + labelElement = errorElement.parent().prev()#again preventing another call to $(this) + + #test whether we have all the above three elements + #alert(labelElement.text() + ":" + labelElement.attr("for") + ":" + inputElement.attr("id") + ":" + errorElement.text()) + #test to get only label text without the "*" sign + #alert(labelElement.contents().last().text()) + + #Error string + labelText = labelElement.contents().last().text()#without the "*" + errorString = labelText + "(" + errorElement.text() + ")"#e.g. First Name(Can't be blank) + + #anchor element for error string + anchorElement = $(document.createElement("a")) + #Siddhant thinks that focussing input element can work even without the href in action + anchorElement.attr("href","javascript:void(0)") + anchorElement.addClass("errorlink") + anchorElement.text(errorString) + anchorElement.click -> + $("#" + inputElement.attr("id")).focus() + + #listElement for anchor element + listElement = $(document.createElement("li")) + errorSummaryContainer.append(listElement) + listElement.append(anchorElement) + + #End iteration + + #focus the first anchor of errors and announce the same to screen reader user + $(".errorlink:first").focus() + #Still need javascript statements to generate a hidden element with ARIA alert/asert/whatever + #that tells "There are errors. you are on first error. Press tab and shift tab to move between errors. Hit enter to resolve it." + + #End if errors + window.nestedFormEvents.insertFields = (content, assoc, link) -> $(content).insertBefore(link)