From 93aff47ac5918679e16b386b44f9b91637fdef04 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Tue, 29 Jul 2014 03:15:34 +0000 Subject: [PATCH] wpLink: add keyboard navigation, improve accessibility. Props afercia, fixes #28897. git-svn-id: https://develop.svn.wordpress.org/trunk@29321 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/class-wp-editor.php | 19 +++++---- src/wp-includes/css/editor.css | 65 +++++++++++++++++++++++++---- src/wp-includes/js/wplink.js | 23 ++++++++-- 3 files changed, 88 insertions(+), 19 deletions(-) diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 14baef6f2..b328bd19d 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -1376,7 +1376,7 @@ public static function wp_link_dialog() { - +

-
+
    -
    -
    +
    +
    + + +
      @@ -1416,12 +1419,12 @@ public static function wp_link_dialog() {
      - +
      diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 244312842..05184a304 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -79,19 +79,21 @@ } .mce-textbox, -.mce-checkbox i.mce-i-checkbox { +.mce-checkbox i.mce-i-checkbox, +#wp-link .query-results { border: 1px solid #ddd; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); - -webkit-transition: .05s border-color ease-in-out; - transition: .05s border-color ease-in-out; + -webkit-transition: .05s all ease-in-out; + transition: .05s all ease-in-out; } .mce-textbox:focus, .mce-textbox.mce-focus, -.mce-checkbox:focus i.mce-i-checkbox { +.mce-checkbox:focus i.mce-i-checkbox, +#wp-link .query-results:focus { border-color: #5b9dd9; -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); box-shadow: 0 0 2px rgba(30,140,190,0.8); @@ -1061,7 +1063,6 @@ i.mce-i-hr:before { #wp-link-close { color: #666; - cursor: pointer; padding: 0; position: absolute; top: 0; @@ -1069,6 +1070,9 @@ i.mce-i-hr:before { width: 36px; height: 36px; text-align: center; + background: none; + border: none; + cursor: pointer; } #wp-link-close:before { @@ -1087,6 +1091,16 @@ i.mce-i-hr:before { color: #2ea2cc; } +#wp-link-close:focus { + outline: none; + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + #link-selector { padding: 0 16px 50px; } @@ -1135,6 +1149,11 @@ i.mce-i-hr:before { margin: 3px 0; } +#wp-link p.howto a { + text-decoration: none; + color: inherit; +} + #wp-link-search-toggle { cursor: pointer; } @@ -1198,17 +1217,46 @@ i.mce-i-hr:before { top: 205px; } -#wp-link li, -#wp-link .query-notice { +#wp-link li { clear: both; margin-bottom: 0; border-bottom: 1px solid #f1f1f1; color: #333; - padding: 4px 6px; + padding: 4px 6px 4px 10px; cursor: pointer; position: relative; } +#wp-link .query-notice { + padding: 0; + border-bottom: 1px solid #dfdfdf; + background-color: #f7fcfe; + color: #000; +} + +#wp-link .query-notice .query-notice-default, +#wp-link .query-notice .query-notice-hint { + display: block; + padding: 6px; + border-left: 4px solid #2ea2cc; +} + +#wp-link .unselectable.no-matches-found { + padding: 0; + border-bottom: 1px solid #dfdfdf; + background-color: #fef7f1; +} + +#wp-link .no-matches-found .item-title { + display: block; + padding: 6px; + border-left: 4px solid #d54e21; +} + +#wp-link .query-results em { + font-style: normal; +} + #wp-link li:hover { background: #eaf2fa; color: #151515; @@ -1285,6 +1333,7 @@ i.mce-i-hr:before { #wp-link-cancel { line-height: 25px; + float: left; } #wp-link-update { diff --git a/src/wp-includes/js/wplink.js b/src/wp-includes/js/wplink.js index 052d7d544..22cd1296f 100644 --- a/src/wp-includes/js/wplink.js +++ b/src/wp-includes/js/wplink.js @@ -31,6 +31,11 @@ var wpLink; rivers.recent = new River( $( '#most-recent-results' ) ); rivers.elements = inputs.dialog.find( '.query-results' ); + // Get search notice text + inputs.queryNotice = $( '#query-notice-message' ); + inputs.queryNoticeTextDefault = inputs.queryNotice.find( '.query-notice-default' ); + inputs.queryNoticeTextHint = inputs.queryNotice.find( '.query-notice-hint' ); + // Bind event handlers inputs.dialog.keydown( wpLink.keydown ); inputs.dialog.keyup( wpLink.keyup ); @@ -43,10 +48,19 @@ var wpLink; wpLink.close(); }); - $( '#wp-link-search-toggle' ).click( wpLink.toggleInternalLinking ); + $( '#wp-link-search-toggle' ).on( 'click', wpLink.toggleInternalLinking ); rivers.elements.on( 'river-select', wpLink.updateFields ); + // Display 'hint' message when search field or 'query-results' box are focused + inputs.search.add( rivers.elements ).on( 'focus.wplink', function() { + inputs.queryNoticeTextDefault.hide(); + inputs.queryNoticeTextHint.removeClass( 'screen-reader-text' ).show(); + } ).on( 'blur.wplink', function() { + inputs.queryNoticeTextDefault.show(); + inputs.queryNoticeTextHint.addClass( 'screen-reader-text' ).hide(); + } ); + inputs.search.keyup( function() { var self = this; @@ -335,6 +349,8 @@ var wpLink; } else if ( key.TAB === event.keyCode ) { id = event.target.id; + // wp-link-submit must always be the last focusable element in the dialog. + // following focusable elements will be skipped on keyboard navigation. if ( id === 'wp-link-submit' && ! event.shiftKey ) { inputs.close.focus(); event.preventDefault(); @@ -391,12 +407,13 @@ var wpLink; }; }, - toggleInternalLinking: function() { + toggleInternalLinking: function( event ) { var visible = inputs.wrap.hasClass( 'search-panel-visible' ); inputs.wrap.toggleClass( 'search-panel-visible', ! visible ); setUserSetting( 'wplink', visible ? '0' : '1' ); inputs[ ! visible ? 'search' : 'url' ].focus(); + event.preventDefault(); } }; @@ -506,7 +523,7 @@ var wpLink; if ( ! results ) { if ( firstPage ) { - list += '
    • ' + + list += '
    • ' + wpLinkL10n.noMatchesFound + '
      • '; } } else {