From f00f900149aff7a31252e99a41d7a31cc9c83bee Mon Sep 17 00:00:00 2001 From: polesye Date: Fri, 11 Oct 2013 11:07:22 +0300 Subject: [PATCH 1/8] Fix styles. --- lms/static/sass/course/layout/_calculator.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss index 046afbbcf8..b60ae2285b 100644 --- a/lms/static/sass/course/layout/_calculator.scss +++ b/lms/static/sass/course/layout/_calculator.scss @@ -117,6 +117,7 @@ div.calc-main { height: 35px; @include hide-text; width: 35px; + display: block; } dl { @@ -124,8 +125,6 @@ div.calc-main { border-radius: 3px; box-shadow: 0 0 3px #999; color: #333; - display: none; - line-height: lh(); opacity: 0; padding: 10px; position: absolute; @@ -133,10 +132,15 @@ div.calc-main { top: -122px; @include transition(none); width: 600px; + height: 0; + overflow: hidden; + pointer-events: none; &.shown { - display: block; - opacity: 1.0; + height: auto; + opacity: 1; + overflow: visible; + pointer-events: auto; } dt { From 12d2c47c9f8d1cb0d1a26232034789e5b4b39485 Mon Sep 17 00:00:00 2001 From: polesye Date: Fri, 11 Oct 2013 12:13:49 +0300 Subject: [PATCH 2/8] Fix BLD-165. --- lms/static/coffee/fixtures/calculator.html | 8 ++-- lms/static/coffee/src/calculator.coffee | 48 ++++++++++++++++++---- 2 files changed, 43 insertions(+), 13 deletions(-) diff --git a/lms/static/coffee/fixtures/calculator.html b/lms/static/coffee/fixtures/calculator.html index 61c6f5e153..0001715707 100644 --- a/lms/static/coffee/fixtures/calculator.html +++ b/lms/static/coffee/fixtures/calculator.html @@ -4,14 +4,14 @@
- +
- Hints +
- - + +
diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee index 788081ebd6..c1f5ae96b5 100644 --- a/lms/static/coffee/src/calculator.coffee +++ b/lms/static/coffee/src/calculator.coffee @@ -3,25 +3,55 @@ class @Calculator $('.calc').click @toggle $('form#calculator').submit(@calculate).submit (e) -> e.preventDefault() - $('div.help-wrapper a').hover(@helpToggle).click (e) -> - e.preventDefault() + $('div.help-wrapper a') + .focus($.proxy @helpOnFocus, @) + .blur($.proxy @helpOnBlur, @) + .hover( + $.proxy(@helpShow, @), + $.proxy(@helpHide, @) + ) + .click (e) -> + e.preventDefault() toggle: (event) -> event.preventDefault() + $calc = $('.calc') + $calcWrapper = $('#calculator_wrapper') + $('div.calc-main').toggleClass 'open' - if $('.calc.closed').length - $('.calc').attr 'aria-label', 'Open Calculator' + if $calc.hasClass('closed') + $calc.attr 'aria-label', 'Open Calculator' + $calcWrapper + .find('input, a') + .attr 'tabindex', -1 else - $('.calc').attr 'aria-label', 'Close Calculator' + $calc.attr 'aria-label', 'Close Calculator' + $calcWrapper + .find('input, a') + .attr 'tabindex', null # TODO: Investigate why doing this without the timeout causes it to jump # down to the bottom of the page. I suspect it's because it's putting the # focus on the text field before it transitions onto the page. - setTimeout (-> $('#calculator_wrapper #calculator_input').focus()), 100 + setTimeout (-> $calcWrapper.find('#calculator_input').focus()), 100 - $('.calc').toggleClass 'closed' + $calc.toggleClass 'closed' - helpToggle: -> - $('.help').toggleClass 'shown' + helpOnFocus: (e) -> + e.preventDefault() + @isFocusedHelp = true + @helpShow() + + helpOnBlur: (e) -> + e.preventDefault() + @isFocusedHelp = false + @helpHide() + + helpShow: -> + $('.help').addClass 'shown' + + helpHide: -> + if not @isFocusedHelp + $('.help').removeClass 'shown' calculate: -> $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) -> From 524388dbb8e6adf28de3821c84269f0714f837cd Mon Sep 17 00:00:00 2001 From: polesye Date: Fri, 11 Oct 2013 13:15:03 +0300 Subject: [PATCH 3/8] Add a11y. --- lms/static/coffee/fixtures/calculator.html | 8 +++--- lms/static/coffee/src/calculator.coffee | 23 +++++++++++------ lms/templates/courseware/courseware.html | 29 +++++++++++----------- 3 files changed, 34 insertions(+), 26 deletions(-) diff --git a/lms/static/coffee/fixtures/calculator.html b/lms/static/coffee/fixtures/calculator.html index 0001715707..93c1827ad5 100644 --- a/lms/static/coffee/fixtures/calculator.html +++ b/lms/static/coffee/fixtures/calculator.html @@ -1,16 +1,16 @@
  • - Calculator +
    - -
    + +
    - +
    diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee index c1f5ae96b5..f63a880f18 100644 --- a/lms/static/coffee/src/calculator.coffee +++ b/lms/static/coffee/src/calculator.coffee @@ -4,14 +4,15 @@ class @Calculator $('form#calculator').submit(@calculate).submit (e) -> e.preventDefault() $('div.help-wrapper a') - .focus($.proxy @helpOnFocus, @) - .blur($.proxy @helpOnBlur, @) .hover( $.proxy(@helpShow, @), $.proxy(@helpHide, @) ) .click (e) -> e.preventDefault() + $('div.help-wrapper') + .focusin($.proxy @helpOnFocus, @) + .focusout($.proxy @helpOnBlur, @) toggle: (event) -> event.preventDefault() @@ -20,15 +21,19 @@ class @Calculator $('div.calc-main').toggleClass 'open' if $calc.hasClass('closed') - $calc.attr 'aria-label', 'Open Calculator' + $calc.attr + 'aria-label': 'Open Calculator' + 'aria-expanded': false $calcWrapper - .find('input, a') + .find('input, a, dt, dd') .attr 'tabindex', -1 else - $calc.attr 'aria-label', 'Close Calculator' + $calc.attr + 'aria-label': 'Close Calculator' + 'aria-expanded': true $calcWrapper .find('input, a') - .attr 'tabindex', null + .attr 'tabindex', 0 # TODO: Investigate why doing this without the timeout causes it to jump # down to the bottom of the page. I suspect it's because it's putting the # focus on the text field before it transitions onto the page. @@ -48,11 +53,15 @@ class @Calculator helpShow: -> $('.help').addClass 'shown' + $('#calculator_hint').attr 'aria-expanded', true helpHide: -> if not @isFocusedHelp $('.help').removeClass 'shown' + $('#calculator_hint').attr 'aria-expanded', false calculate: -> $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) -> - $('#calculator_output').val(data.result) + $('#calculator_output') + .val(data.result) + .focus() diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html index da3beba262..bdb0aac2ac 100644 --- a/lms/templates/courseware/courseware.html +++ b/lms/templates/courseware/courseware.html @@ -208,24 +208,23 @@ ${fragment.foot_html()} % if course.show_calculator:
    - ${_("Calculator")} - +
    - +
    - ${_("Hints")} -
    -
    ${_("Suffixes:")}
    -
    %kMGTcmunp
    -
    ${_("Operations:")}
    -
    ^ * / + - ()
    -
    ${_("Functions:")}
    -
    sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs
    -
    ${_("Constants")}
    -
    e, pi
    + +
    +
    ${_("Suffixes:")}
    +
    %kMGTcmunp
    +
    ${_("Operations:")}
    +
    ^ * / + - ()
    +
    ${_("Functions:")}
    +
    sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs
    +
    ${_("Constants")}
    +
    e, pi