Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8021 from edx/ahsan/AC-107-calculator-incompatible-aria-role-attribute

Browse Source 
calculator incompatible aria role attribute
This commit is contained in:
Ahsan Ulhaq
2015-05-29 02:11:37 -04:00
parent eb3d3a99a5 9044e48cad
commit 361d82adbb
3 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lms/static/coffee/src/calculator.coffee
View File

@@ -82,6 +82,7 @@ class @Calculator
.addClass('shown')
.attr('aria-hidden', false)
$(document).on('click', @handleClickOnDocument)
hideHint: ->
@@ -185,11 +186,14 @@ class @Calculator
@hideHint()
handleClickOnHintButton: (e) ->
e.preventDefault()
e.stopPropagation()
if @hintPopup.hasClass 'shown'
@hideHint()
@hintButton.attr('aria-expanded', false)
else
@showHint()
@hintButton.attr('aria-expanded', true)
@activeHint.focus()
handleClickOnHintPopup: (e) ->

5
lms/static/sass/course/modules/_calculator.scss
View File

@@ -62,7 +62,7 @@ div.calc-main {
@include box-sizing(border-box);
padding: lh();
input#calculator_button {
button#calculator_button {
background: #111;
border: 1px solid $black;
border-radius: 0;
@@ -131,9 +131,12 @@ div.calc-main {
@include hide-text;
width: 35px;
display: block;
border: none;
&:focus {
outline: 5px auto #5b9dd9;
box-shadow: none;
border: none;
}
}

28
lms/templates/calculator/toggle_calculator.html
View File

@@ -9,15 +9,16 @@
<div id="calculator_wrapper">
<form id="calculator">
<div class="input-wrapper">
<input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />
<label for="calculator_input" class="sr">${_('Calculator Input')}</label>
<input type="text" id="calculator_input" title="${_('Calculator Input Field')}" />
<div class="help-wrapper">
<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>
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1" aria-describedby="hint-instructions">${_("Hints")}</a>
<button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls=“calculator_input_help” aria-describedby="hint-instructions"><span class="sr">${_("Hints")}</span></button>
<ul id="calculator_input_help" class="help" aria-activedescendant="hint-moreinfo" role="tooltip" aria-hidden="true">
<li class="hint-item" id="hint-moreinfo" tabindex="-1">
<ul id="calculator_input_help" class="help" aria-hidden="true">
<li class="hint-item" id="hint-moreinfo">
<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='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html">',
math_link_end='</a>',
@@ -26,17 +27,17 @@
)}</span></p>
</li>
<li class="hint-item" id="hint-tips" tabindex="-1"><p><span class="bold">${_("Tips")}:</span> </p>
<li class="hint-item" id="hint-tips"><p><span class="bold">${_("Tips")}:</span> </p>
<ul>
<li class="hint-item" id="hint-paren" tabindex="-1"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li>
<li class="hint-item" id="hint-spaces" tabindex="-1"><p>${_("Do not use spaces in expressions.")}</p></li>
<li class="hint-item" id="hint-howto-constants" tabindex="-1"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li>
<li class="hint-item" id="hint-howto-maffixes" tabindex="-1"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li>
<li class="hint-item" id="hint-howto-functions" tabindex="-1"><p>${_("For functions, type the name of the function, then the expression in 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-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-functions"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li>
</ul>
</li>
<li class="hint-item" id="hint-list" tabindex="-1">
<li class="hint-item" id="hint-list">
<table class="calculator-input-help-table">
<tbody>
<tr>
@@ -132,8 +133,9 @@
</div>
</div>
<input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" aria-label="${_('Calculate')}" value="=" tabindex="-1" />
<input type="text" id="calculator_output" title="${_('Calculator Output Field')}" readonly tabindex="-1" />
<button id="calculator_button">=<span class="sr">${_('Calculate')}</span></button>
<label for="calculator_output" class="sr">${_('Calculator Output')}</label>
<input type="text" id="calculator_output" readonly />
</form>
</div>
</div>