diff --git a/app/assets/images/recurring_select/cancel.png b/app/assets/images/recurring_select/cancel.png index afd91524..e77fdfc8 100755 Binary files a/app/assets/images/recurring_select/cancel.png and b/app/assets/images/recurring_select/cancel.png differ diff --git a/app/assets/javascripts/recurring_select.js.coffee b/app/assets/javascripts/recurring_select.js.coffee index d4932139..5c0b5e51 100644 --- a/app/assets/javascripts/recurring_select.js.coffee +++ b/app/assets/javascripts/recurring_select.js.coffee @@ -17,6 +17,7 @@ methods = changed: -> if @val() == "custom" methods.open_custom.apply(@) + setModalTabbing() else methods.set_initial_values.apply(@) @@ -103,3 +104,19 @@ $.fn.recurring_select.texts = { order: ["1st", "2nd", "3rd", "4th", "5th", "Last"] show_week: [true, true, true, true, false, false] } + +# ========================= 508 Accessiblity =============================== +setModalTabbing = -> + tabbables = $('#rs_modal').find(':tabbable') + $('#rs_modal').off('keydown').on 'keydown', (e) -> + `var x` + if $(e.target).is(tabbables.first()) and e.which == 9 and e.shiftKey + e.preventDefault() + x = tabbables.last() + x.focus() + else if $(e.target).is(tabbables.last()) and e.which == 9 and !e.shiftKey + e.preventDefault() + x = tabbables.first() + x.focus() + return + return diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index baeccd6a..ab50313e 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb @@ -24,6 +24,28 @@ window.RecurringSelectDialog = @outer_holder.trigger "recurring_select:dialog_opened" @freq_select.focus() + ordinal_suffix_of = (i) -> + j = i % 10 + k = i % 100 + if j == 1 and k != 11 + return i + 'st' + if j == 2 and k != 12 + return i + 'nd' + if j == 3 and k != 13 + return i + 'rd' + i + 'th' + + full_string_weekday = (num) -> + weekday = new Array(7) + weekday[0] = 'Sunday' + weekday[1] = 'Monday' + weekday[2] = 'Tuesday' + weekday[3] = 'Wednesday' + weekday[4] = 'Thursday' + weekday[5] = 'Friday' + weekday[6] = 'Saturday' + weekday[num] + positionDialogVert: (initial_positioning) => window_height = $(window).height() window_width = $(window).width() @@ -67,7 +89,7 @@ window.RecurringSelectDialog = mainEventInit: -> # Tap hooks are for jQueryMobile @outer_holder.on 'click tap', @outerCancel - @content.on 'click tap', 'h1 a', @cancel + @content.on 'click tap', 'h4 a', @cancel @save_button = @content.find('input.rs_save').on "click tap", @save @content.find('input.rs_cancel').on "click tap", @cancel @@ -182,16 +204,20 @@ window.RecurringSelectDialog = monthly_calendar.html "" for num in [1..31] monthly_calendar.append (day_link = $(document.createElement("a")).text(num)) + day_link.addClass("a_day") + day_link.attr('aria-label', ordinal_suffix_of(num) + ' Day of Month' ); if $.inArray(num, @current_rule.hash.validations.day_of_month) != -1 day_link.addClass("selected") # add last day of month button monthly_calendar.append (end_of_month_link = $(document.createElement("a")).text($.fn.recurring_select.texts["last_day"])) end_of_month_link.addClass("end_of_month") + end_of_month_link.attr('aria-label', ' Last Day of Month' ); if $.inArray(-1, @current_rule.hash.validations.day_of_month) != -1 end_of_month_link.addClass("selected") monthly_calendar.find("a").on "click tap", @dateOfMonthChanged + monthly_calendar.find("a").attr('href',''); init_calendar_weeks: (section) => monthly_calendar = section.find(".rs_calendar_week") @@ -206,6 +232,8 @@ window.RecurringSelectDialog = for day_of_week in [$.fn.recurring_select.texts["first_day_of_week"]...(7 + $.fn.recurring_select.texts["first_day_of_week"])] day_of_week = day_of_week % 7 day_link = $("", {text: cell_str[day_of_week] }) + day_link.attr('href',''); + day_link.attr('aria-label', ordinal_suffix_of(num) + ' ' + full_string_weekday(day_of_week) ); day_link.attr("day", day_of_week) day_link.attr("instance", num) monthly_calendar.append day_link @@ -302,10 +330,10 @@ window.RecurringSelectDialog = template: () -> str = " -
+
-

#{$.fn.recurring_select.texts["repeat"]}

+

#{$.fn.recurring_select.texts["repeat"]}

+ #{$.fn.recurring_select.texts["days"]}

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["weeks_on"]}:

" + for day_of_week in [$.fn.recurring_select.texts["first_day_of_week"]...(7 + $.fn.recurring_select.texts["first_day_of_week"])] day_of_week = day_of_week % 7 - str += "#{$.fn.recurring_select.texts["days_first_letter"][day_of_week]}" + str += "#{$.fn.recurring_select.texts["days_first_letter"][day_of_week]}" str += "
@@ -342,7 +371,7 @@ window.RecurringSelectDialog =

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["months"]}:

@@ -355,7 +384,7 @@ window.RecurringSelectDialog =

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["years"]}

@@ -363,8 +392,8 @@ window.RecurringSelectDialog =

- - + +
diff --git a/app/assets/stylesheets/recurring_select.scss b/app/assets/stylesheets/recurring_select.scss index 4d5bd72f..5a2d1016 100644 --- a/app/assets/stylesheets/recurring_select.scss +++ b/app/assets/stylesheets/recurring_select.scss @@ -32,7 +32,7 @@ select { .rs_dialog { background-color:#f6f6f6; border:1px solid #acacac; @include shadows(1px, 3px, 8px, rgba(0,0,0,0.25)); @include rounded_corners(7px); display:inline-block; min-width:200px; margin-left:-125px; overflow:hidden; position:relative; .rs_dialog_content { padding:10px; - h1 { font-size:16px; padding:0px; margin:0 0 10px 0; + h4 { padding:0px; margin:0 0 10px 0; a {float:right; display:inline-block; height:16px; width:16px; background-image:image-url("recurring_select/cancel.png"); background-position:center; background-repeat:no-repeat;} } @@ -48,7 +48,7 @@ select { .day_holder { border-left:1px solid #ccc; position:relative; margin-top:5px; height:26px; a {display:block; padding:5px 7px; font-size:14px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 0px; float:left; text-decoration:none; font-weight:bold; @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.1)); background-color:#fff;; - &.selected {background-color:#89a; color:#fff; @include inset_shadows(1px, 1px, 2px, rgba(0,0,0,0.2)); @include gradiant(#9ab, #789); } + &.selected {background-color:#677889; color:#fff; @include inset_shadows(1px, 1px, 2px, rgba(0,0,0,0.2)); @include gradiant(#677890, #677889); } &:hover { cursor:pointer; background-color:#dde;} } } @@ -56,7 +56,7 @@ select { .rs_calendar_day, .rs_calendar_week { width:155px; a {display:inline-block; text-align:center; width:15px; padding:5px 3px; font-size:12px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 1px; margin:-1px 0 0 -1px; line-height:10px; background-color:#fff; font-weight:bold; - &.selected {background-color:#89a; color:#fff; @include gradiant(#9ab, #789); @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.2)); text-shadow:0 1px 1px #333;} + &.selected {background-color:#677889; color:#fff; @include gradiant(#677890, #677889); @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.2)); text-shadow:0 1px 1px #333;} &:hover { cursor:pointer; background-color:#dde;} } a.end_of_month { width: 81px; } @@ -101,3 +101,7 @@ select { } } + +#x_cancel_button { + color: #757575; +}