Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
edx-platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
edx
edx-platform
Commits
bd817bb4
Commit
bd817bb4
authored
Jul 07, 2015
by
Chris
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #8784 from edx/clrux/ux-2337-a11y-calculator-contrast
Fixing aria values and contrast for accessibility
parents
c25e37ea
3309581a
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
33 additions
and
8 deletions
+33
-8
lms/static/sass/course/modules/_calculator.scss
+30
-5
lms/templates/calculator/toggle_calculator.html
+3
-3
No files found.
lms/static/sass/course/modules/_calculator.scss
View file @
bd817bb4
...
@@ -37,14 +37,20 @@ div.calc-main {
...
@@ -37,14 +37,20 @@ div.calc-main {
background-color
:
$black
;
background-color
:
$black
;
top
:
-36px
;
top
:
-36px
;
}
}
.utility-control-label
{
background
:
$black
;
color
:
$white
;
}
}
}
div
#calculator_wrapper
{
div
#calculator_wrapper
{
background
:
$black
;
clear
:
both
;
clear
:
both
;
max-height
:
90px
;
position
:
relative
;
position
:
relative
;
top
:
-36px
;
top
:
-36px
;
max-height
:
90px
;
background
:
$black
;
color
:
$white
;
// UI: input help table
// UI: input help table
.calculator-input-help-table
{
.calculator-input-help-table
{
...
@@ -62,6 +68,10 @@ div.calc-main {
...
@@ -62,6 +68,10 @@ div.calc-main {
@include
box-sizing
(
border-box
);
@include
box-sizing
(
border-box
);
padding
:
lh
();
padding
:
lh
();
.calc-output-label
{
color
:
$white
;
}
button
#calculator_button
{
button
#calculator_button
{
background
:
#111
;
background
:
#111
;
border
:
1px
solid
$black
;
border
:
1px
solid
$black
;
...
@@ -82,6 +92,11 @@ div.calc-main {
...
@@ -82,6 +92,11 @@ div.calc-main {
&
:hover
,
&
:focus
{
&
:hover
,
&
:focus
{
color
:
#333
;
color
:
#333
;
}
}
.calc-button-label
{
background
:
$black
;
color
:
$white
;
}
}
}
input
#calculator_output
{
input
#calculator_output
{
...
@@ -125,19 +140,29 @@ div.calc-main {
...
@@ -125,19 +140,29 @@ div.calc-main {
right
:
0
;
right
:
0
;
top
:
0
;
top
:
0
;
#hint-instructions
{
color
:
$white
;
}
#calculator_hint
{
#calculator_hint
{
background
:
url("../images/info-icon.png")
center
center
no-repeat
;
height
:
35px
;
@include
hide-text
;
@include
hide-text
;
width
:
35px
;
display
:
block
;
display
:
block
;
height
:
35px
;
width
:
35px
;
border
:
none
;
border
:
none
;
background
:
url("../images/info-icon.png")
center
center
no-repeat
;
color
:
$white
;
&
:focus
{
&
:focus
{
outline
:
5px
auto
#5b9dd9
;
outline
:
5px
auto
#5b9dd9
;
box-shadow
:
none
;
box-shadow
:
none
;
border
:
none
;
border
:
none
;
}
}
.calc-hint
{
background
:
$black
;
color
:
$white
;
}
}
}
.help
{
.help
{
...
...
lms/templates/calculator/toggle_calculator.html
View file @
bd817bb4
...
@@ -17,7 +17,7 @@ from django.core.urlresolvers import reverse
...
@@ -17,7 +17,7 @@ from django.core.urlresolvers import reverse
<div
class=
"help-wrapper"
>
<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>
<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>
<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>
<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>
<ul
id=
"calculator_input_help"
class=
"help"
aria-hidden=
"true"
>
<ul
id=
"calculator_input_help"
class=
"help"
aria-hidden=
"true"
>
<li
class=
"hint-item"
id=
"hint-moreinfo"
>
<li
class=
"hint-item"
id=
"hint-moreinfo"
>
...
@@ -135,8 +135,8 @@ from django.core.urlresolvers import reverse
...
@@ -135,8 +135,8 @@ from django.core.urlresolvers import reverse
</div>
</div>
</div>
</div>
<button
id=
"calculator_button"
>
=
<span
class=
"sr"
>
${_('Calculate')}
</span></button>
<button
id=
"calculator_button"
>
=
<span
class=
"
calc-button-label
sr"
>
${_('Calculate')}
</span></button>
<label
for=
"calculator_output"
class=
"sr"
>
${_('Calculator Output')}
</label>
<label
for=
"calculator_output"
class=
"
calc-output-label
sr"
>
${_('Calculator Output')}
</label>
<input
type=
"text"
id=
"calculator_output"
readonly
/>
<input
type=
"text"
id=
"calculator_output"
readonly
/>
</form>
</form>
</div>
</div>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment