Skip to content

E
edx-platform
Commit b42a9ff4 by Chris Committed by GitHub
Options

Merge pull request #12716 from edx/clrux/ac-484 

AC-484 changing aria- to data-, a to button
parents 469dac6f 76df1348
Showing with 210 additions and 180 deletions
lms/static/coffee/fixtures/calculator.html
<ul> <div class="calc-main">
<li class="calc-main"> <button title="Open Calculator" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button">
<a href="#" class="calc" title="Open Calculator" role="button" aria-controls="calculator_wrapper" aria-expanded="false">Open Calculator</a> <span class="icon fa fa-calculator" aria-hidden="true"></span>
</button>
<div id="calculator_wrapper"> <div id="calculator_wrapper">
<form id="calculator"> <form id="calculator">
<div class="input-wrapper"> <div class="input-wrapper">
<input type="text" id="calculator_input" tabindex="-1" /> <input type="text" id="calculator_input" tabindex="-1" />
<div class="help-wrapper"> <div class="help-wrapper">
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1">Hints</a> <button type="button" id="calculator_hint" aria-haspopup="true">Hints</button>
<ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true"> <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"> <li class="hint-item" id="hint-moreinfo" tabindex="-1">
<p> <p>
<span class="bold">For detailed information, see <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-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>. <a id="hint-link-second" href="http://edx-guide-for-students.readthedocs.io/en/latest/index.html">EdX Learner's Guide</a>.
</span> </span>
</p> </p>
</li> </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-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> <li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:/span> 3.14 or .98</p></li>
</ul> </ul>
</div> </div>
</div> </div>
<input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" /> <input id="calculator_button" type="submit" title="Calculate" value="=" />
<input type="text" id="calculator_output" readonly tabindex="-1" /> <input type="text" id="calculator_output" tabindex="-1" readonly />
</form> </form>
</div> </div>
</li> </div>
</ul>
lms/static/coffee/spec/calculator_spec.coffee
...@@ -105,7 +105,7 @@ describe 'Calculator', -> ...@@ -105,7 +105,7 @@ describe 'Calculator', ->
expect(element.focus).toHaveBeenCalled() expect(element.focus).toHaveBeenCalled()
expect(@calculator.activeHint).toEqual(element) 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', -> it 'select the first hint if argument element is not passed', ->
@calculator.selectHint() @calculator.selectHint()
......
lms/static/coffee/src/calculator.coffee
...@@ -14,13 +14,15 @@ ...@@ -14,13 +14,15 @@
class @Calculator class @Calculator
constructor: -> constructor: ->
@hintButton = $('#calculator_hint') @hintButton = $('#calculator_hint')
@calcInput = $('#calculator_input')
@hintPopup = $('.help') @hintPopup = $('.help')
@hintsList = @hintPopup.find('.hint-item') @hintsList = @hintPopup.find('.hint-item')
@selectHint($('#' + @hintPopup.attr('aria-activedescendant'))); @selectHint($('#' + @hintPopup.attr('data-calculator-hint')));
$('.calc').click @toggle $('.calc').click @toggle
$('form#calculator').submit(@calculate).submit (e) -> $('form#calculator').submit(@calculate).submit (e) ->
e.preventDefault() e.preventDefault()
@hintButton @hintButton
.click(($.proxy(@handleClickOnHintButton, @))) .click(($.proxy(@handleClickOnHintButton, @)))
...@@ -34,6 +36,9 @@ class @Calculator ...@@ -34,6 +36,9 @@ class @Calculator
.keyup($.proxy(@handleKeyUpOnHint, @)) .keyup($.proxy(@handleKeyUpOnHint, @))
@handleClickOnDocument = $.proxy(@handleClickOnDocument, @) @handleClickOnDocument = $.proxy(@handleClickOnDocument, @)
@calcInput
.focus(($.proxy(@inputClickHandler, @)))
KEY: KEY:
TAB : 9 TAB : 9
...@@ -51,21 +56,19 @@ class @Calculator ...@@ -51,21 +56,19 @@ class @Calculator
$calcWrapper = $('#calculator_wrapper') $calcWrapper = $('#calculator_wrapper')
text = gettext('Open Calculator') text = gettext('Open Calculator')
isExpanded = false isExpanded = false
icon = 'fa-calculator' icon = 'fa-calculator'
$('div.calc-main').toggleClass 'open' $('.calc-main').toggleClass 'open'
if $calc.hasClass('closed') if $calc.hasClass('closed')
$calcWrapper $calcWrapper
.find('input, a') .attr('aria-hidden', 'true')
.attr 'tabindex', -1
else else
text = gettext('Close Calculator') text = gettext('Close Calculator')
icon = 'fa-close' icon = 'fa-close'
isExpanded = true isExpanded = true
$calcWrapper $calcWrapper
.find('input, a') .attr('aria-hidden', 'false')
.attr 'tabindex', 0
# TODO: Investigate why doing this without the timeout causes it to jump # 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 # 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. # focus on the text field before it transitions onto the page.
...@@ -84,12 +87,16 @@ class @Calculator ...@@ -84,12 +87,16 @@ class @Calculator
.addClass(icon) .addClass(icon)
$calc.toggleClass 'closed' $calc.toggleClass 'closed'
inputClickHandler: ->
$('#calculator_output').removeClass('has-result')
showHint: -> showHint: ->
@hintPopup @hintPopup
.addClass('shown') .addClass('shown')
.attr('aria-hidden', false) .attr('aria-hidden', false)
$('#calculator_output').removeClass('has-result')
$(document).on('click', @handleClickOnDocument) $(document).on('click', @handleClickOnDocument)
...@@ -97,6 +104,8 @@ class @Calculator ...@@ -97,6 +104,8 @@ class @Calculator
@hintPopup @hintPopup
.removeClass('shown') .removeClass('shown')
.attr('aria-hidden', true) .attr('aria-hidden', true)
$('#calculator_output').removeClass('has-result')
$(document).off('click', @handleClickOnDocument) $(document).off('click', @handleClickOnDocument)
...@@ -106,7 +115,7 @@ class @Calculator ...@@ -106,7 +115,7 @@ class @Calculator
@activeHint = element; @activeHint = element;
@activeHint.focus(); @activeHint.focus();
@hintPopup.attr('aria-activedescendant', element.attr('id')); @hintPopup.attr('data-calculator-hint', element.attr('id'));
prevHint: () -> prevHint: () ->
prev = @activeHint.prev(); # the previous hint prev = @activeHint.prev(); # the previous hint
...@@ -211,4 +220,5 @@ class @Calculator ...@@ -211,4 +220,5 @@ class @Calculator
$.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) -> $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
$('#calculator_output') $('#calculator_output')
.val(data.result) .val(data.result)
.addClass('has-result')
.focus() .focus()
lms/static/sass/course/modules/_calculator.scss
...@@ -70,12 +70,12 @@ ...@@ -70,12 +70,12 @@
} }
#calculator_button { #calculator_button {
background: #111; background: $white;
border: 1px solid $black; border: 1px solid $white;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
color: $white; color: $black;
float: left; float: left;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
...@@ -87,7 +87,8 @@ ...@@ -87,7 +87,8 @@
width: flex-grid(.5) + flex-gutter(); width: flex-grid(.5) + flex-gutter();
&:hover, &:focus { &:hover, &:focus {
color: $link-color; background: $blue-d2;
color: $white;
} }
.calc-button-label { .calc-button-label {
...@@ -97,11 +98,11 @@ ...@@ -97,11 +98,11 @@
} }
#calculator_output { #calculator_output {
background: #111; background: $white;
border: 0; border: 1px solid $white;
box-shadow: none; box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
color: $white; color: $black;
float: left; float: left;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -109,6 +110,11 @@ ...@@ -109,6 +110,11 @@
padding: 10px; padding: 10px;
-webkit-appearance: none; -webkit-appearance: none;
width: flex-grid(4); width: flex-grid(4);
&.has-result {
border: 1px solid $green-d1;
box-shadow: inset 0px 0px ($baseline/3) $green-d1;
}
} }
.input-wrapper { .input-wrapper {
......
lms/templates/calculator/toggle_calculator.html
<%page expression_filter="h"/>
<%! <%!
from django.utils.translation import ugettext as _ from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse from django.core.urlresolvers import reverse
from openedx.core.djangolib.markup import HTML, Text
%> %>
<div class="calc-main"> <div class="calc-main">
<button title="${_('Open Calculator')}" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button"> <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> <span class="icon fa fa-calculator" aria-hidden="true"></span>
<span class="utility-control-label sr">${_("Open Calculator")}</span> </button>
</button>
<div id="calculator_wrapper">
<div id="calculator_wrapper"> <form id="calculator">
<form id="calculator"> <div class="input-wrapper">
<div class="input-wrapper"> <label for="calculator_input" class="label-calc-input sr">${_('Enter equation')}</label>
<label for="calculator_input" class="label-calc-input sr">${_('Calculator Input')}</label> <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" />
<input type="text" id="calculator_input" title="${_('Calculator Input Field')}" />
<div class="help-wrapper">
<div class="help-wrapper"> <button type="button" title="${_('Hints')}" id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help"></button>
<p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p> <ul id="calculator_input_help" class="help" aria-hidden="true">
<li class="hint-item" id="hint-moreinfo">
<button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="calc-hint sr">${_("Hints")}</span></button> <p class="sr">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
<p>
<ul id="calculator_input_help" class="help" aria-hidden="true"> <span class="bold">
<li class="hint-item" id="hint-moreinfo"> ${Text(_("For detailed information, see {math_link_start}Entering Mathematical and Scientific Expressions{math_link_end} in the {guide_link_start}edX Guide for Students{guide_link_end}.")).format(
<p><span class="bold">${_("For detailed information, see {math_link_start}Entering Mathematical and Scientific Expressions{math_link_end} in the {guide_link_start}edX Guide for Students{guide_link_end}.").format( math_link_start=HTML('<a href="http://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/completing_assignments/SFD_mathformatting.html#math-formatting">'),
math_link_start='<a href="http://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/completing_assignments/SFD_mathformatting.html#math-formatting">', math_link_end=HTML('</a>'),
math_link_end='</a>', guide_link_start=HTML('<a href="http://edx-guide-for-students.readthedocs.io/en/latest/index.html">'),
guide_link_start='<a href="http://edx-guide-for-students.readthedocs.io/en/latest/index.html">', guide_link_end=HTML('</a>'),
guide_link_end='</a>', )}
)}</span></p> </span>
</li> </p>
</li>
<li class="hint-item" id="hint-tips"><p><span class="bold">${_("Tips")}:</span> </p> <li class="hint-item" id="hint-tips"><p><span class="bold">${_("Tips")}:</span> </p>
<ul> <ul>
<li class="hint-item" id="hint-paren"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li> <li class="hint-item" id="hint-paren"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li>
<li class="hint-item" id="hint-spaces"><p>${_("Do not use spaces in expressions.")}</p></li> <li class="hint-item" id="hint-spaces"><p>${_("Do not use spaces in expressions.")}</p></li>
<li class="hint-item" id="hint-howto-constants"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li> <li class="hint-item" id="hint-howto-constants"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li>
<li class="hint-item" id="hint-howto-maffixes"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li> <li class="hint-item" id="hint-howto-maffixes"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li>
<li class="hint-item" id="hint-howto-functions"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li> <li class="hint-item" id="hint-howto-functions"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li>
</ul> </ul>
</li> </li>
<li class="hint-item" id="hint-list">
<li class="hint-item" id="hint-list"> <table class="calculator-input-help-table">
<table class="calculator-input-help-table"> <tbody>
<tbody> <tr>
<tr> <th scope="col">${_("To Use")}</th>
<th scope="col">${_("To Use")}</th> <th scope="col">${_("Type")}</th>
<th scope="col">${_("Type")}</th> <th scope="col">${_("Examples")}</th>
<th scope="col">${_("Examples")}</th> </tr>
</tr> <tr>
<tr> <th scope="row">${_("Numbers")}</th>
<th scope="row">${_("Numbers")}</th> <td>
<td>${_("Integers")}<br /> ${_("Integers")}<br />
${_("Fractions")}<br /> ${_("Fractions")}<br />
${_("Decimals")} ${_("Decimals")}
</td> </td>
<td>2520<br /> <td>
2/3<br /> 2520<br />
3.14, .98 2/3<br />
</td> 3.14, .98
</tr> </td>
<tr> </tr>
<th scope="row">${_("Operators")}</th> <tr>
## Translators: Please do not translate mathematical symbols. <th scope="row">${_("Operators")}</th>
<td>${_("+ - * / (add, subtract, multiply, divide)")}<br /> ## Translators: Please do not translate mathematical symbols.
## Translators: Please do not translate mathematical symbols. <td>
${_("^ (raise to a power)")}<br /> ${_("+ - * / (add, subtract, multiply, divide)")}<br />
## Translators: Please do not translate mathematical symbols. ## Translators: Please do not translate mathematical symbols.
${_("_ (add a subscript)")}<br /> ${_("^ (raise to a power)")}<br />
## Translators: Please do not translate mathematical symbols. ## Translators: Please do not translate mathematical symbols.
${_("|| (parallel resistors)")} ${_("_ (add a subscript)")}<br />
</td> ## Translators: Please do not translate mathematical symbols.
<td>x+(2*y)/x-1 ${_("|| (parallel resistors)")}
x^(n+1)<br /> </td>
v_IN+v_OUT<br /> <td>
1||2 x+(2*y)/x-1
</td> x^(n+1)<br />
</tr> v_IN+v_OUT<br />
<tr> 1||2
<th scope="row">${_("Greek letters")}</th> </td>
<td>${_("Name of letter")}</td> </tr>
<td>alpha<br /> <tr>
lambda <th scope="row">${_("Greek letters")}</th>
</td> <td>${_("Name of letter")}</td>
</tr> <td>
<tr> alpha<br />
<th scope="row">${_("Constants")}</th> lambda
<td>c, e, g, i, j, k, pi, q, T</td> </td>
<td>20*c<br /> </tr>
418*T <tr>
</td> <th scope="row">${_("Constants")}</th>
</tr> <td>c, e, g, i, j, k, pi, q, T</td>
<tr> <td>
<th scope="row">${_("Affixes")}</th> 20*c<br />
<td>${_("Percent sign (%) and metric affixes (d, c, m, u, n, p, k, M, G, T)")}</td> 418*T
<td>20%<br /> </td>
20c<br /> </tr>
418T <tr>
</td> <th scope="row">${_("Affixes")}</th>
</tr> <td>${_("Percent sign (%) and metric affixes (d, c, m, u, n, p, k, M, G, T)")}</td>
<tr> <td>
<th scope="row">${_("Basic functions")}</th> 20%<br />
<td>abs, exp, fact or factorial, ln, log2, log10, sqrt</td> 20c<br />
<td>abs(x+y)<br /> 418T
sqrt(x^2-y) </td>
</td> </tr>
</tr> <tr>
<tr> <th scope="row">${_("Basic functions")}</th>
<th scope="row">${_("Trigonometric functions")}</th> <td>abs, exp, fact or factorial, ln, log2, log10, sqrt</td>
<td>sin, cos, tan, sec, csc, cot<br /> <td>
arcsin, sinh, arcsinh, etc.<br /> abs(x+y)<br />
</td> sqrt(x^2-y)
<td>sin(4x+y)<br /> </td>
arccsch(4x+y) </tr>
</td> <tr>
<td></td> <th scope="row">${_("Trigonometric functions")}</th>
</tr> <td>
<tr> sin, cos, tan, sec, csc, cot<br />
## Translators: Please see http://en.wikipedia.org/wiki/Scientific_notation arcsin, sinh, arcsinh, etc.<br />
<th scope="row">${_("Scientific notation")}</th> </td>
## Translators: 10^ is a mathematical symbol. Please do not translate. <td>
<td>${_("10^ and the exponent")}</td> sin(4x+y)<br />
<td>10^-9</td> arccsch(4x+y)
</tr> </td>
<tr> <td></td>
## Translators: this is part of scientific notation. Please see http://en.wikipedia.org/wiki/Scientific_notation#E_notation </tr>
<th scope="row">${_("e notation")}</th> <tr>
## Translators: 1e is a mathematical symbol. Please do not translate. ## Translators: Please see http://en.wikipedia.org/wiki/Scientific_notation
<td>${_("1e and the exponent")}</td> <th scope="row">${_("Scientific notation")}</th>
<td>1e-9</td> ## Translators: 10^ is a mathematical symbol. Please do not translate.
</tr> <td>${_("10^ and the exponent")}</td>
</tbody> <td>10^-9</td>
</table> </tr>
</li> <tr>
</ul> ## Translators: this is part of scientific notation. Please see http://en.wikipedia.org/wiki/Scientific_notation#E_notation
</div> <th scope="row">${_("e notation")}</th>
</div> ## Translators: 1e is a mathematical symbol. Please do not translate.
<td>${_("1e and the exponent")}</td>
<td>1e-9</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
</div>
<input type="submit" id="calculator_button" value="=" aria-label="${_('Calculate')}"> <input type="submit" id="calculator_button" value="=" aria-label="${_('Calculate')}">
<label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label> <label for="calculator_output" class="calc-output-label sr">${_('Result')}</label>
<input type="text" id="calculator_output" readonly /> <input type="text" id="calculator_output" tabindex="-1" readonly />
</form> </div>
</div> </form>
</div> </div>
</div>
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