Skip to content

Commit

Permalink
Merge pull request #204 from CodeforAustralia/fixes/190-keyboard-nav-…
Browse files Browse the repository at this point in the history 
…rebased-cleaned

improves keyboard nav / accessibility
  • Loading branch information
@techieshark
techieshark authored Sep 23, 2016
2 parents cfba146 + a18b201 commit ce52ccc
Show file tree
Hide file tree
Showing 9 changed files with 13,257 additions and 90 deletions.
215 changes: 190 additions & 25 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,58 @@ body { background-color: #39acc9; color: #3e3e3e;
height: 48px;
vertical-align: baseline;
}

.org-logo a:focus,
.new-search.btn:focus,
.footer a:focus,
.school-details a:focus {
box-shadow: 0px 0px 10px white; /* stand out against blue page background */
}

.block-intro input, .block-address input, .block-support select {
font-weight: normal;
}
.container .jumbotron { background-color: #f7f6f6; border-radius: 0px; margin-bottom: 25em;}
.btn {
border: none;
border-radius: 0px;
background-color: #d72d6c;
background-color: rgb(215, 45, 108);
color: white;
}
.btn:active, .btn:focus, .btn:hover {
background-color: #39acc9;
color: white;
}
.btn:focus {
outline: 2px dashed white;
}
.btn.working {
background-color: grey;
}

/* if you want a random button to have a material box shadow effect, add the .material class */
/*
.btn.material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.btn.material:hover,
.btn.material:focus
{
box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}
*/





.footer { margin-bottom: 1.5em; }
.footer p {color: #f7f6f6;}
.footer a {color: #f7f6f6; font-weight: bold;}
.footer a {
color: #f7f6f6;
font-weight: bold;
padding: 0 0.2em;
}
.footer a:hover { text-decoration: none; border-bottom: 1px solid; }
.footer .fa-inverse {color: #76BFD1;}
.footer .fa-stack {color: #f7f6f6;}
Expand All @@ -60,7 +92,8 @@ a .fa {
a:hover .fa-circle {
color: #f7f6f6;
}
a:hover .fa-stack-1x {
a:hover .fa-stack-1x,
a:focus .fa-stack-1x {
color: #375a63; /* use same as circle's text shadow for increased contrast */
text-shadow: none;
}
Expand All @@ -79,19 +112,51 @@ a:hover .fa-stack-1x {
background-color: rgb(25, 155, 186); /* slightly darker blue */
}

/* Results */
#results-container {
margin-bottom: 50px;
.leaflet-control-zoom a:focus {
background: rgb(57, 172, 201);
border: 1px solid black;
color: white;
}

#list-container {
.leaflet-control-attribution a:focus:not(:active),
.cartodb-logo a:focus:not(:active) img {
background: rgb(57, 172, 201);
outline: 1px dashed darkblue !important;
box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
padding: 1em;
color: white;
display: inline-block;
font-weight: bold;
}
.results-list li {
list-style: none;

.cartodb-logo a:focus:not(:active) img {
padding: 0;
}
.results-list li.selected .btn {
font-weight: bold;
background-color: rgb(57, 172, 201);

a.popup-schoolname {
display: inline-block;
font-weight: bold;
}
a.popup-schoolname:focus {
outline: 1px dashed darkblue;
margin: -3px 0;
padding: 9px 9px;
}

/* prevent funny resize (from padding change) when activated (usually by mouse press) */
a.popup-schoolname:focus:active {
outline: none;
padding: 0;
}

a.popup-schoolname:focus + .popup-meta {
margin-top: 6px;
}


/* Results */
#results-container {
margin-bottom: 50px;
}

.results-list .btn {
Expand All @@ -101,6 +166,74 @@ a:hover .fa-stack-1x {
padding: 1em;
}

.results-list .btn span.school-type {
display: block;
/* buttons can contain phrasing content like <span> (and not flow content like <div>),
but we want these spans to look like block elements */
}


/* A quasi-radio button control with raised buttons inspired by Material Design. */
/* Unlike a radio button set, you use Tab (vs left/rigth/up/down) to change focus
to the different buttons, and activating one of them changes view and then focus
will shift to selected entry on the map.
Hat tip to Andrea for coming up with the behavior / interaction between focused/hovered
buttons and the previously selected button. */
.material-radio {
margin-bottom: 0.5em;
}

.material-radio .btn {
/*border: 2px solid transparent;*/
transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
color: #333;
text-shadow: none;
background-color: inherit;
margin-bottom: 0;
/* margin: 0: buttons squished adjectly so when hover leaves one it'll enter another,
preventing flash of .selected button */
}

.material-radio .btn:hover,
.material-radio .btn:focus,
.material-radio .btn.selected
{
font-weight: bold;
color: white;

background: rgb(57, 172, 201); /* blue */
}
.material-radio .btn.red:hover,
.material-radio .btn.red:focus,
.material-radio .btn.red.selected
{
background: rgb(215, 45, 108); /* red */
}


.material-radio .btn:hover,
.material-radio .btn:focus
{
box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}
.material-radio .btn:focus:not(:active) {
outline: 2px dashed white;
}

/* .dimmer added w/ a bit of help from listview.js since CSS can't select backwards */
/* general sibling ~ selector only goes forwards */
/*.material-radio .btn:not(.selected):hover ~ .btn.selected.dimmer,*/
.material-radio .btn.dimmer {
text-shadow: 0 0 1px #3a3a3a;

background: rgb(154, 208, 213); /* ie8 non-RGBa fallback */
background: rgba(57, 172, 201, 0.5); /* lighter blue */
}
.material-radio .btn.dimmer.red {
background: rgb(233, 145, 167); /* ie8 non-RGBa fallback */
background: rgba(215, 45, 108, 0.5); /* lighter red */
}

.results-list .school-distance {
float: right;
font-weight: lighter;
Expand Down Expand Up @@ -153,23 +286,26 @@ a.readmore {
font-weight: bold;
color: inherit;
text-decoration: none;
}
.readmore:before {
content: " \2192 "; /* &rarr; is → is \2192 */
margin-left: 2px;
color: #717171;
}
.readmore span {
margin-left: 4px;
}
.readmore-arrow:before {
content: " \2192 "; /* &rarr; is -> is \2192 */
border-bottom: none;
display: inline-block;
}
.readmore-text {
border-bottom: 1px dotted;
margin-left: 2px;
color: #717171;
}
.readmore:hover span {
.readmore-text:hover {
border-bottom-style: solid;
}

.school-description .field-label {
font-size: 25px;
color: #d72d6c;
color: rgb(215, 45, 108);
font-weight: bolder;
}

Expand All @@ -187,6 +323,7 @@ ul.school-details {
color: white;
/* text-decoration: underline; */
border-bottom: 1px dotted rgb(225, 225, 225);
padding: 0.1em;
}
.school-details a:hover {
/*color: #deeef2;*/
Expand Down Expand Up @@ -228,7 +365,7 @@ ul.school-details {
.school-name {
font-size: 40px;
font-weight: bold;
color: #d72d6c;
color: rgb(215, 45, 108);
text-decoration: none;
padding-top: 0.5em;
margin-bottom: 0.5em;
Expand Down Expand Up @@ -308,15 +445,19 @@ select#soflow, .styled-select {
width: 2em;
height: 2em;
}
.nearby-schools-control button.toggle-filters:hover {
background: rgb(90, 90, 90);
.nearby-schools-control button.toggle-filters:hover,
.nearby-schools-control button.toggle-filters:focus
{
background: rgb(57, 172, 201);
color: white;
background: rgb(160,160,160);
}
.nearby-schools-control button.toggle-filters:focus {
outline: none;
border: 1px solid rgb(91, 157, 217);
/* box-shadow for circular outline halo effect */
box-shadow: 0 0 1px 1px white, 0 0 1px 2px rgb(91, 157, 217);
border: 1px solid black;
}

.nearby-schools-control h1 {
font-size: 14px;
margin: 0;
Expand Down Expand Up @@ -423,6 +564,7 @@ input#nearby-girls {
padding: 2em;
border: 1px solid rgba(255, 255, 255, 0.19);
background-color: transparent;
width: 100%;
}

.new-search.btn:hover {
Expand Down Expand Up @@ -465,10 +607,18 @@ input#nearby-girls {
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
padding: 0.25em;
}
.lesser-text a:hover {
border-bottom-style: solid;
}
.lesser-text a:focus {
outline: 1px dashed darkblue;
text-decoration: underline;
border: none;
}


.school-name-search {
margin-right: 2em;
margin-left: 2em;
Expand Down Expand Up @@ -530,6 +680,21 @@ input#nearby-girls {
}
}

/* When we programmatically set focus on things,
the thing should be the container of a focusable item,
so we don't actually want users to know we've focused on it.
This is just so we can focus on newly added target containers
in the app -- the tabbing equivalent of scrolling to the element
(because when we scroll down, the next tab element naturally might
still be above the elements newly in view).
This should be low enough specificity that it doesn't accidently
disable an outline on things we really want to be outlined.
*/
[tabindex="-1"] {
outline: none;
}

/* prevent iphone from autozooming on form fields */
/* http://stackoverflow.com/a/9039885/1024811
http://stackoverflow.com/a/16255670/1024811 */
Expand Down
Loading

0 comments on commit ce52ccc

Please sign in to comment.