Add :focus style to all links, use JS to blur() them on click so the style is only visible when tabbing, props lessbloat, see #21324

git-svn-id: https://develop.svn.wordpress.org/trunk@21529 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2012-08-15 18:40:11 +00:00
parent 7366f664a8
commit f0d18a35dd
4 changed files with 89 additions and 9 deletions

View File

@ -247,10 +247,15 @@ strong .post-com-count span {
color: #174f69;
}
.wrap .add-new-h2 {
.wrap .add-new-h2,
.wrap .add-new-h2:active {
background: #f1f1f1;
}
.wrap .add-new-h2:focus {
background: #c7e7fd;
}
.subtitle {
color: #777;
}
@ -465,11 +470,24 @@ a.button.disabled {
}
a:hover,
a:active,
a:focus {
a:active {
color: #d54e21;
}
a:focus {
background: #c7e7fd;
color: #124964;
}
a:active {
background: none;
outline: thin dotted;
}
#adminmenu a:active {
outline: none;
}
#adminmenu a:hover,
#adminmenu li.menu-top > a:focus,
#adminmenu ul.wp-submenu a:hover,
@ -591,10 +609,21 @@ h3.dashboard-widget-title small,
color: #333;
}
th.sortable a:hover, th.sortable a:active, th.sortable a:focus {
th.sortable a:hover,
th.sortable a:active,
th.sortable a:focus {
color: #333;
}
th.sortable a:focus {
background: #e1e1e1;
background-image: -webkit-gradient(linear, left bottom, left top, from(#dcdcdc), to(#e9e9e9));
background-image: -webkit-linear-gradient(bottom, #dcdcdc, #e9e9e9);
background-image: -moz-linear-gradient(bottom, #dcdcdc, #e9e9e9);
background-image: -o-linear-gradient(bottom, #dcdcdc, #e9e9e9);
background-image: linear-gradient(to top, #dcdcdc, #e9e9e9);
}
h3.dashboard-widget-title small a {
color: #d7d7d7;
}
@ -1851,6 +1880,15 @@ table.diff .diff-addedline ins {
background: transparent url(../images/arrows-vs.png) no-repeat right 4px;
}
#screen-meta-links a:focus {
background: #c7e7fd url(../images/arrows.png) no-repeat right 4px;
color: #124964;
}
#screen-meta-links a:active {
background-color: transparent url(../images/arrows.png) no-repeat right 4px;
}
#screen-meta-links a.show-settings.screen-meta-active {
background: transparent url(../images/arrows-vs.png) no-repeat right -31px;
}

View File

@ -238,10 +238,15 @@ strong .post-com-count span {
color: #464646;
}
.wrap .add-new-h2 {
.wrap .add-new-h2,
.wrap .add-new-h2:active {
background: #f1f1f1;
}
.wrap .add-new-h2:focus {
background: #c7e7fd;
}
.subtitle {
color: #777;
}
@ -456,11 +461,24 @@ a.button.disabled {
}
a:hover,
a:active,
a:focus {
a:active {
color: #d54e21;
}
a:focus {
background: #c7e7fd;
color: #124964;
}
a:active {
background: none;
outline: thin dotted;
}
#adminmenu a:active {
outline: none;
}
#adminmenu a:hover,
#adminmenu li.menu-top > a:focus,
#adminmenu ul.wp-submenu a:hover,
@ -582,10 +600,21 @@ h3.dashboard-widget-title small,
color: #333;
}
th.sortable a:hover, th.sortable a:active, th.sortable a:focus {
th.sortable a:hover,
th.sortable a:active,
th.sortable a:focus {
color: #333;
}
th.sortable a:focus {
background: #e1e1e1;
background-image: -webkit-gradient(linear, left bottom, left top, from(#dcdcdc), to(#e9e9e9));
background-image: -webkit-linear-gradient(bottom, #dcdcdc, #e9e9e9);
background-image: -moz-linear-gradient(bottom, #dcdcdc, #e9e9e9);
background-image: -o-linear-gradient(bottom, #dcdcdc, #e9e9e9);
background-image: linear-gradient(to top, #dcdcdc, #e9e9e9);
}
h3.dashboard-widget-title small a {
color: #d7d7d7;
}
@ -864,6 +893,15 @@ table.widefat span.spam a,
background: transparent url(../images/arrows.png) no-repeat right 4px;
}
#screen-meta-links a:focus {
background: #c7e7fd url(../images/arrows.png) no-repeat right 4px;
color: #124964;
}
#screen-meta-links a:active {
background-color: transparent url(../images/arrows.png) no-repeat right 4px;
}
#screen-meta-links a.show-settings.screen-meta-active {
background: transparent url(../images/arrows.png) no-repeat right -31px;
}

View File

@ -453,7 +453,6 @@ code {
.subsubsub a.current {
font-weight: bold;
background: none;
border: none;
}

View File

@ -375,6 +375,11 @@ $(document).ready( function() {
pageInput.val('1');
});
}
// Blur accessibility link background color onclick
$(document).on('click.wp-accessibility-blur', 'a', function() {
$(this).blur();
});
});
// internal use