Skip to content

E
edx-platform
Commit 76df1348 by Chris Rodriguez
Options

AC-484 removing aria-activedescendent

parent df399de1
Showing with 60 additions and 43 deletions
lms/static/coffee/fixtures/calculator.html
<ul>
<li class="calc-main">
<a href="#" class="calc" title="Open Calculator" role="button" aria-controls="calculator_wrapper" aria-expanded="false">Open Calculator</a>
<div class="calc-main">
<button title="Open Calculator" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button">
<span class="icon fa fa-calculator" aria-hidden="true"></span>
</button>
<div id="calculator_wrapper">
<form id="calculator">
<div class="input-wrapper">
<input type="text" id="calculator_input" tabindex="-1" />
<div class="help-wrapper">
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1">Hints</a>
<ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
<li class="hint-item" id="hint-moreinfo" tabindex="-1">
<p>
<span class="bold">For detailed information, see
<a id="hint-link-first" href="http://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/completing_assignments/SFD_mathformatting.html#math-formatting">Entering Mathematical and Scientific Expressions</a> in the
<a id="hint-link-second" href="http://edx-guide-for-students.readthedocs.io/en/latest/index.html">EdX Learner's Guide</a>.
</span>
</p>
</li>
<li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">Integers:</span> 2520</p></li>
<li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:</span> 3.14 or .98</p></li>
</ul>
</div>
</div>
<input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
<input type="text" id="calculator_output" readonly tabindex="-1" />
</form>
<form id="calculator">
<div class="input-wrapper">
<input type="text" id="calculator_input" tabindex="-1" />
<div class="help-wrapper">
<button type="button" id="calculator_hint" aria-haspopup="true">Hints</button>
<ul id="calculator_input_help" class="help" data-calculator-hint="hint-integers" role="tooltip" aria-hidden="true">
<li class="hint-item" id="hint-moreinfo" tabindex="-1">
<p>
<span class="bold">For detailed information, see
<a id="hint-link-first" href="http://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/completing_assignments/SFD_mathformatting.html#math-formatting">Entering Mathematical and Scientific Expressions</a> in the
<a id="hint-link-second" href="http://edx-guide-for-students.readthedocs.io/en/latest/index.html">EdX Learner's Guide</a>.
</span>
</p>
</li>
<li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">Integers:</span> 2520</p></li>
<li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:/span> 3.14 or .98</p></li>
</ul>
</div>
</div>
<input id="calculator_button" type="submit" title="Calculate" value="=" />
<input type="text" id="calculator_output" tabindex="-1" readonly />
</form>
</div>
</li>
</ul>
</div>
lms/static/coffee/spec/calculator_spec.coffee
......@@ -105,7 +105,7 @@ describe 'Calculator', ->
expect(element.focus).toHaveBeenCalled()
expect(@calculator.activeHint).toEqual(element)
expect(@calculator.hintPopup).toHaveAttr('aria-activedescendant', element.attr('id'))
expect(@calculator.hintPopup).toHaveAttr('data-calculator-hint', element.attr('id'))
it 'select the first hint if argument element is not passed', ->
@calculator.selectHint()
......
lms/static/coffee/src/calculator.coffee
......@@ -14,13 +14,15 @@
class @Calculator
constructor: ->
@hintButton = $('#calculator_hint')
@calcInput = $('#calculator_input')
@hintPopup = $('.help')
@hintsList = @hintPopup.find('.hint-item')
@selectHint($('#' + @hintPopup.attr('aria-activedescendant')));
@selectHint($('#' + @hintPopup.attr('data-calculator-hint')));
$('.calc').click @toggle
$('form#calculator').submit(@calculate).submit (e) ->
e.preventDefault()
@hintButton
.click(($.proxy(@handleClickOnHintButton, @)))
......@@ -34,6 +36,9 @@ class @Calculator
.keyup($.proxy(@handleKeyUpOnHint, @))
@handleClickOnDocument = $.proxy(@handleClickOnDocument, @)
@calcInput
.focus(($.proxy(@inputClickHandler, @)))
KEY:
TAB : 9
......@@ -51,21 +56,19 @@ class @Calculator
$calcWrapper = $('#calculator_wrapper')
text = gettext('Open Calculator')
isExpanded = false
icon = 'fa-calculator'
icon = 'fa-calculator'
$('div.calc-main').toggleClass 'open'
$('.calc-main').toggleClass 'open'
if $calc.hasClass('closed')
$calcWrapper
.find('input, a')
.attr 'tabindex', -1
.attr('aria-hidden', 'true')
else
text = gettext('Close Calculator')
icon = 'fa-close'
isExpanded = true
$calcWrapper
.find('input, a')
.attr 'tabindex', 0
.attr('aria-hidden', 'false')
# 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.
......@@ -84,12 +87,16 @@ class @Calculator
.addClass(icon)
$calc.toggleClass 'closed'
inputClickHandler: ->
$('#calculator_output').removeClass('has-result')
showHint: ->
@hintPopup
.addClass('shown')
.attr('aria-hidden', false)
$('#calculator_output').removeClass('has-result')
$(document).on('click', @handleClickOnDocument)
......@@ -97,6 +104,8 @@ class @Calculator
@hintPopup
.removeClass('shown')
.attr('aria-hidden', true)
$('#calculator_output').removeClass('has-result')
$(document).off('click', @handleClickOnDocument)
......@@ -106,7 +115,7 @@ class @Calculator
@activeHint = element;
@activeHint.focus();
@hintPopup.attr('aria-activedescendant', element.attr('id'));
@hintPopup.attr('data-calculator-hint', element.attr('id'));
prevHint: () ->
prev = @activeHint.prev(); # the previous hint
......@@ -211,4 +220,5 @@ class @Calculator
$.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
$('#calculator_output')
.val(data.result)
.addClass('has-result')
.focus()
lms/static/sass/course/modules/_calculator.scss
......@@ -70,12 +70,12 @@
}
#calculator_button {
background: #111;
border: 1px solid $black;
background: $white;
border: 1px solid $white;
border-radius: 0;
box-shadow: none;
@include box-sizing(border-box);
color: $white;
color: $black;
float: left;
font-size: 30px;
font-weight: bold;
......@@ -87,7 +87,8 @@
width: flex-grid(.5) + flex-gutter();
&:hover, &:focus {
color: $link-color;
background: $blue-d2;
color: $white;
}
.calc-button-label {
......@@ -97,11 +98,11 @@
}
#calculator_output {
background: #111;
border: 0;
background: $white;
border: 1px solid $white;
box-shadow: none;
@include box-sizing(border-box);
color: $white;
color: $black;
float: left;
font-size: 16px;
font-weight: bold;
......@@ -109,6 +110,11 @@
padding: 10px;
-webkit-appearance: none;
width: flex-grid(4);
&.has-result {
border: 1px solid $green-d1;
box-shadow: inset 0px 0px ($baseline/3) $green-d1;
}
}
.input-wrapper {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment