Keyboard navigation friendliness for themes.php.

props matveb, azaozz, jorbin.
see #26527.

Built from https://develop.svn.wordpress.org/trunk@26922


git-svn-id: http://core.svn.wordpress.org/trunk@26803 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin
2014-01-08 21:35:09 +00:00
parent 56e3b1f46e
commit 9e942606c8
7 changed files with 116 additions and 25 deletions

View File

@@ -6465,6 +6465,24 @@ span.imgedit-scale-warn {
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.theme-browser .theme:focus {
outline: 1px dotted #222;
}
/* Hide shortcut actions and hover feedback when using tab navigation */
.theme-browser .theme:focus .theme-actions {
display: none;
}
/* Restore display of theme controls if you hover a focused theme */
.theme-browser .theme:focus:hover .theme-actions {
display: block;
}
.theme-browser .theme:focus .more-details {
opacity: 1;
}
/* Current theme needs to have its action always on view */
.theme-browser .theme.active:focus .theme-actions {
display: block;
}
.theme-browser.rendered .theme:hover .more-details {
opacity: 1;
@@ -6690,10 +6708,13 @@ body.theme-overlay-open {
width: 50px;
text-align: center;
float: right;
border: 0;
border-left: 1px solid #ddd;
background-color: transparent;
}
.theme-overlay .theme-header .close:hover:before {
.theme-overlay .theme-header .close:hover:before,
.theme-overlay .theme-header .close:focus:before {
color: #fff;
}
@@ -6710,20 +6731,21 @@ body.theme-overlay-open {
.theme-overlay .theme-header .left {
cursor: pointer;
color: #777;
background-color: transparent;
height: 48px;
width: 54px;
float: left;
text-align: center;
border: 0;
border-right: 1px solid #ddd;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.theme-overlay .theme-header .close:hover,
.theme-overlay .theme-header .right:hover,
.theme-overlay .theme-header .left:hover {
.theme-overlay .theme-header .left:hover,
.theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .left:focus {
background: #0074a2;
color: #fff;
}
@@ -6832,7 +6854,8 @@ body.folded .theme-overlay .theme-wrap {
background: transparent;
}
.theme-overlay .theme-actions .delete-theme:hover {
.theme-overlay .theme-actions .delete-theme:hover,
.theme-overlay .theme-actions .delete-theme:focus {
background: #d54e21;
color: #fff;
border-color: #d54e21;