Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

508 Compliance (Accessibility) #130

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open

508 Compliance (Accessibility) #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
98e706e
Add title attribute to the Every 'foo' input
iamanissa May 17, 2019
2e5f001
Fix 508 contrast error: change #89a to #64717F
iamanissa May 17, 2019
3b9bb27
Change header from h1 to h4 as h1 doesn't logically flow with page
iamanissa May 17, 2019
3429212
Abbreviated weekdays not suffient error: Add aria-label with days spe…
iamanissa May 17, 2019
a170fd0
Merge pull request #1 from SuperJones/508_html_fix
iamanissa May 17, 2019
11b6efb
Add javascript/coffeescript to make modal focusable
May 17, 2019
479581e
First part of trapping focus in modal (address bar is still an issue)
May 20, 2019
eca085b
Add class and empty href to a tags so that they become tabbable
May 21, 2019
f290c3d
Add href and title to a tags in monthly:day of the week table
May 21, 2019
3fe1732
Add methods for adding st,nd,rd,th & drying up full unabbreviated wee…
May 21, 2019
7b1e428
Add aria-label to monthly:day of month links
May 21, 2019
a6a97b1
Move html id one div down
May 21, 2019
c0fda9d
Use more concise method
May 21, 2019
5207802
Remove duplicate methods in wrong file
May 21, 2019
93eb5c8
Comment out lines that might not be used
May 21, 2019
7fd81ba
Change h1 to an h4 & remove font-size
May 21, 2019
7d29335
Change h1 to h4 in cancel method & move css id to first modal div
May 21, 2019
74d652e
Remove no longer needed commented out lines
May 21, 2019
7d67700
Merge pull request #2 from SuperJones/508_trap_focus
iamanissa May 21, 2019
b06756f
Give x button an id and background color
iamanissa Jul 12, 2019
0b2a673
Up the color contrast to higher that 4:5:1 for weekday letter & numbe…
iamanissa Jul 12, 2019
ba7cbcc
Merge pull request #3 from SuperJones/508_color_contrast
iamanissa Jul 15, 2019
79c8047
Use #677889 as background value per ANDI tool
iamanissa Jul 16, 2019
e674d7b
Merge pull request #4 from SuperJones/508_color_contrast2
iamanissa Jul 16, 2019
2bc1663
Fix the gradients in the css file which were below 4:5:1 ratio
iamanissa Jul 16, 2019
bf04ebc
Merge pull request #5 from SuperJones/508_fix_gradients
iamanissa Jul 16, 2019
c4f89e0
Used preview app to change darkness of cancel button
iamanissa Jul 16, 2019
91d0077
Merge pull request #6 from SuperJones/508_fix_cancel_button_contrast
iamanissa Jul 16, 2019
29db3b5
Add html id's to ok and cancel button
iamanissa Aug 26, 2019
ccf804e
Merge pull request #7 from SuperJones/ok_button_needs_id
iamanissa Aug 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified app/assets/images/recurring_select/cancel.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions app/assets/javascripts/recurring_select.js.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ methods =
changed: ->
if @val() == "custom"
methods.open_custom.apply(@)
setModalTabbing()
else
methods.set_initial_values.apply(@)

Expand Down Expand Up @@ -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
49 changes: 39 additions & 10 deletions app/assets/javascripts/recurring_select_dialog.js.coffee.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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")
Expand All @@ -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 = $("<a>", {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
Expand Down Expand Up @@ -302,10 +330,10 @@ window.RecurringSelectDialog =

template: () ->
str = "
<div class='rs_dialog_holder'>
<div id='rs_modal' class='rs_dialog_holder'>
<div class='rs_dialog'>
<div class='rs_dialog_content'>
<h1>#{$.fn.recurring_select.texts["repeat"]} <a href='#' title='#{$.fn.recurring_select.texts["cancel"]}' Alt='#{$.fn.recurring_select.texts["cancel"]}'></a> </h1>
<h4>#{$.fn.recurring_select.texts["repeat"]} <a href='#' id='x_cancel_button' title='#{$.fn.recurring_select.texts["cancel"]}' Alt='#{$.fn.recurring_select.texts["cancel"]}'></a> </h4>
<p class='frequency-select-wrapper'>
<label for='rs_frequency'>#{$.fn.recurring_select.texts["frequency"]}:</label>
<select data-wrapper-class='ui-recurring-select' id='rs_frequency' class='rs_frequency' name='rs_frequency'>
Expand All @@ -319,21 +347,22 @@ window.RecurringSelectDialog =
<div class='daily_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_daily_interval' class='rs_daily_interval rs_interval' value='1' size='2' />
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_daily_interval' class='rs_daily_interval rs_interval' value='1' size='2' title='Enter number of days to repeat'/>
#{$.fn.recurring_select.texts["days"]}
</p>
</div>
<div class='weekly_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_weekly_interval' class='rs_weekly_interval rs_interval' value='1' size='2' />
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_weekly_interval' class='rs_weekly_interval rs_interval' value='1' size='2' title='Enter number of weeks to repeat'/>
#{$.fn.recurring_select.texts["weeks_on"]}:
</p>
<div class='day_holder'>
"

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 += "<a href='#' data-value='#{day_of_week}'>#{$.fn.recurring_select.texts["days_first_letter"][day_of_week]}</a>"
str += "<a href='#' data-value='#{day_of_week}' aria-label='#{full_string_weekday(day_of_week)}'>#{$.fn.recurring_select.texts["days_first_letter"][day_of_week]}</a>"

str += "
</div>
Expand All @@ -342,7 +371,7 @@ window.RecurringSelectDialog =
<div class='monthly_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_monthly_interval' class='rs_monthly_interval rs_interval' value='1' size='2' />
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_monthly_interval' class='rs_monthly_interval rs_interval' value='1' size='2' title='Enter number of months to repeat' />
#{$.fn.recurring_select.texts["months"]}:
</p>
<p class='monthly_rule_type'>
Expand All @@ -355,16 +384,16 @@ window.RecurringSelectDialog =
<div class='yearly_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_yearly_interval' class='rs_yearly_interval rs_interval' value='1' size='2' />
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_yearly_interval' class='rs_yearly_interval rs_interval' value='1' size='2' title='Enter number of years to repeat' />
#{$.fn.recurring_select.texts["years"]}
</p>
</div>
<p class='rs_summary'>
<span></span>
</p>
<div class='controls'>
<input type='button' data-wrapper-class='ui-recurring-select' class='rs_save' value='#{$.fn.recurring_select.texts["ok"]}' />
<input type='button' data-wrapper-class='ui-recurring-select' class='rs_cancel' value='#{$.fn.recurring_select.texts["cancel"]}' />
<input type='button' data-wrapper-class='ui-recurring-select' id='rs_save' class='rs_save' value='#{$.fn.recurring_select.texts["ok"]}' />
<input type='button' data-wrapper-class='ui-recurring-select' id='rs_cancel' class='rs_cancel' value='#{$.fn.recurring_select.texts["cancel"]}' />
</div>
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions app/assets/stylesheets/recurring_select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
}

Expand All @@ -48,15 +48,15 @@ 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;}
}
}

.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; }
Expand Down Expand Up @@ -101,3 +101,7 @@ select {

}
}

#x_cancel_button {
color: #757575;
}