Commit bd817bb4 by Chris

Merge pull request #8784 from edx/clrux/ux-2337-a11y-calculator-contrast

Fixing aria values and contrast for accessibility
parents c25e37ea 3309581a
...@@ -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 {
......
...@@ -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>
......
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