Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improves keyboard nav #204

Merged
merged 22 commits into from
Sep 23, 2016
Merged

improves keyboard nav #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
ac2baf8
use appropriate elements (buttons, forms)
techieshark Sep 12, 2016
50c89e5
new-search button shouldn't have had the .secondary class on it
techieshark Sep 12, 2016
a9aea83
add tota11y tool for checking accessibility
techieshark Sep 18, 2016
d24e26c
focus and padding for keyboard users
techieshark Sep 19, 2016
86e04e3
switch from #hex to rgb() color
techieshark Sep 19, 2016
2c54eae
make readmore arrow more screenreader friendly
techieshark Sep 19, 2016
a2d8629
make main buttons easily visible for keyboard users
techieshark Sep 19, 2016
8383f5f
add .material button option
techieshark Sep 19, 2016
414e04e
make map controls easier to work with keyboard
techieshark Sep 19, 2016
4a6daae
replace list of buttons with button group
techieshark Sep 19, 2016
e8ec295
add setTabFocus() to help tab through interface
techieshark Sep 19, 2016
db0e9ac
remove unnecessary / erroneous click handler
techieshark Sep 19, 2016
97e9d7b
change .jump-to-start to also use scrollAndCenter()
techieshark Sep 19, 2016
7f2637d
add CSS + JS for new results-list style / behavior
techieshark Sep 19, 2016
7eeaace
:focus style for .lesser-text
techieshark Sep 19, 2016
274c553
fix: .new-search can be button
techieshark Sep 19, 2016
f4619f1
map accessibility: if markers clicked via 'Enter', focus on popup
techieshark Sep 19, 2016
9518eea
make popups more styleable for :focus styling
techieshark Sep 19, 2016
ae63239
more specifically select map
techieshark Sep 20, 2016
97e8c37
make map tiles have empty alt tags for accessibility
techieshark Sep 20, 2016
befb9d9
assume keyboard users don't want to click on map attribution links
techieshark Sep 20, 2016
a18b201
use html5 elements + aria roles etc for keyboard nav users
techieshark Sep 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 190 additions & 25 deletions css/style.css
View file
Open in desktop
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