From 1380819bfed4b0d39c3e5566b8f0f207596b09c6 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Mon, 22 Oct 2012 19:51:51 +0000 Subject: [PATCH] Improve visible focus in the admin, props lessbloat, fixes #21324 git-svn-id: https://develop.svn.wordpress.org/trunk@22268 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/colors-classic.css | 23 ++++------------------- wp-admin/css/colors-fresh.css | 19 ------------------- wp-admin/css/wp-admin.css | 31 +++++++++++++++++++++++++++++-- wp-admin/js/common.js | 5 ----- wp-admin/js/post.js | 30 ++++++++++++++---------------- wp-includes/css/editor.css | 4 ++++ 6 files changed, 51 insertions(+), 61 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index 260b9e143c..0a6114bb41 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -195,10 +195,6 @@ strong .post-com-count span { background: #f1f1f1; } -.wrap .add-new-h2:focus { - background: #c7e7fd; -} - .subtitle { color: #777; } @@ -324,19 +320,9 @@ a:active { } 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 .wp-submenu a:hover, @@ -793,6 +779,10 @@ table.widefat .spam a:hover, color: #888; } +.wp-admin .wp-editor-wrap .wp-switch-editor:active { + background-color: #f5fafd; +} + .wp-admin .wp-editor-wrap.tmce-active .switch-tmce, .wp-admin .wp-editor-wrap.html-active .switch-html { background: #f7fcfe; @@ -1420,11 +1410,6 @@ table.diff .diff-addedline ins { background: transparent url(../images/arrows.png) no-repeat right 4px; } -#screen-meta-links a:focus { - background-color: #c7e7fd; - color: #124964; -} - #screen-meta-links a:hover, #screen-meta-links a:active { color: #000; diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 8005dea6b0..99dad1cbf3 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -191,10 +191,6 @@ strong .post-com-count span { background: #f1f1f1; } -.wrap .add-new-h2:focus { - background: #c7e7fd; -} - .subtitle { color: #777; } @@ -320,19 +316,9 @@ a:active { } 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 .wp-submenu a:hover, @@ -746,11 +732,6 @@ table.widefat span.spam a, background: transparent url(../images/arrows.png) no-repeat right 4px; } -#screen-meta-links a:focus { - background-color: #c7e7fd; - color: #124964; -} - #screen-meta-links a:hover, #screen-meta-links a:active { color: #333; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 1ca0eef8c3..04e07aa5da 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -309,13 +309,29 @@ select { } a, -input, +input[type="text"], +input[type="password"], +input[type="number"], +input[type="search"], +input[type="email"], +input[type="url"], select, textarea, div { outline: 0; } +a:focus, +a:active { + outline: thin dotted; +} + +#adminmenu a:focus, +#adminmenu a:active, +.screen-reader-text:focus { + outline: none; +} + blockquote, q { quotes: none; @@ -706,7 +722,7 @@ input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus { - border-color: #a1a1a1; + border-color: #aaa; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1); box-shadow: 1px 1px 2px rgba(0,0,0,0.1); } @@ -1159,6 +1175,12 @@ form.upgrade .hint { margin: 0 24px 0 0; } +#screen-meta-links a:focus { + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); + box-shadow: 1px 1px 1px rgba(0,0,0,0.4); + outline: none; +} + /* screen options and help tabs revert */ #screen-meta { display: none; @@ -4538,6 +4560,10 @@ h3.available-themes { overflow: hidden; } +.available-theme a.screenshot:focus { + border-color: #777; +} + #current-theme .theme-info li, .theme-options li, .available-theme .action-links li { @@ -6495,6 +6521,7 @@ a.rsswidget { width: 326px; height: 67px; text-indent: -9999px; + outline: none; overflow: hidden; padding-bottom: 15px; display: block; diff --git a/wp-admin/js/common.js b/wp-admin/js/common.js index b2017f593a..a7b3c2d487 100644 --- a/wp-admin/js/common.js +++ b/wp-admin/js/common.js @@ -383,11 +383,6 @@ $(document).ready( function() { }); } - // Blur accessibility link background color onclick - $(document).on('click.wp-accessibility-blur', 'a', function() { - $(this).blur(); - }); - // Scroll into view when focused $('#contextual-help-link, #show-settings-link').on( 'focus.scroll-into-view', function(e){ if ( e.target.scrollIntoView ) diff --git a/wp-admin/js/post.js b/wp-admin/js/post.js index 96d50689a6..307c8c214d 100644 --- a/wp-admin/js/post.js +++ b/wp-admin/js/post.js @@ -124,9 +124,9 @@ tagBox = { init : function() { var t = this, ajaxtag = $('div.ajaxtag'); - $('.tagsdiv').each( function() { - tagBox.quickClicks(this); - }); + $('.tagsdiv').each( function() { + tagBox.quickClicks(this); + }); $('input.tagadd', ajaxtag).click(function(){ t.flushTags( $(this).closest('.tagsdiv') ); @@ -138,8 +138,8 @@ tagBox = { $('input.newtag', ajaxtag).blur(function() { if ( this.value == '' ) - $(this).parent().siblings('.taghint').css('visibility', ''); - }).focus(function(){ + $(this).parent().siblings('.taghint').css('visibility', ''); + }).focus(function(){ $(this).parent().siblings('.taghint').css('visibility', 'hidden'); }).keyup(function(e){ if ( 13 == e.which ) { @@ -156,20 +156,18 @@ tagBox = { $(this).suggest( ajaxurl + '?action=ajax-tag-search&tax=' + tax, { delay: 500, minchars: 2, multiple: true, multipleSep: postL10n.comma + ' ' } ); }); - // save tags on post save/publish - $('#post').submit(function(){ + // save tags on post save/publish + $('#post').submit(function(){ $('div.tagsdiv').each( function() { - tagBox.flushTags(this, false, 1); + tagBox.flushTags(this, false, 1); }); }); // tag cloud $('a.tagcloud-link').click(function(){ - tagBox.get( $(this).attr('id') ); - $(this).unbind().click(function(){ - $(this).siblings('.the-tagcloud').toggle(); - return false; - }); + if ( ! $('.the-tagcloud').length ) + tagBox.get( $(this).attr('id') ); + $(this).siblings('.the-tagcloud').toggle(); return false; }); } @@ -277,9 +275,9 @@ jQuery(document).ready( function($) { taxonomyParts = this_id.split('-'); taxonomyParts.shift(); taxonomy = taxonomyParts.join('-'); - settingName = taxonomy + '_tab'; - if ( taxonomy == 'category' ) - settingName = 'cats'; + settingName = taxonomy + '_tab'; + if ( taxonomy == 'category' ) + settingName = 'cats'; // TODO: move to jQuery 1.3+, support for multiple hierarchical taxonomies, see wp-lists.js $('a', '#' + taxonomy + '-tabs').click( function(){ diff --git a/wp-includes/css/editor.css b/wp-includes/css/editor.css index 570a8702e5..0813419171 100644 --- a/wp-includes/css/editor.css +++ b/wp-includes/css/editor.css @@ -1019,6 +1019,10 @@ html[dir="rtl"] .wp-switch-editor { float: left; } +.wp-switch-editor:active { + background-color: #f1f1f1; +} + .wp-switch-editor:hover { text-decoration: none !important; }