Skip to content

Commit

Permalink
wpLink: add keyboard navigation, improve accessibility. Props afercia…
Browse files Browse the repository at this point in the history 
…, fixes #28897.

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


git-svn-id: http://core.svn.wordpress.org/trunk@29102 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information
@azaozz
azaozz committed Jul 29, 2014
1 parent 3f3395a commit 77599cd
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 30 deletions.
19 changes: 11 additions & 8 deletions wp-includes/class-wp-editor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1376,7 +1376,7 @@ public static function wp_link_dialog() {
<?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
<div id="link-modal-title">
<?php _e( 'Insert/edit link' ) ?>
<div id="wp-link-close" tabindex="0"></div>
<button id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
</div>
<div id="link-selector">
<div id="link-options">
Expand All @@ -1391,7 +1391,7 @@ public static function wp_link_dialog() {
<label><span>&nbsp;</span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
</div>
</div>
<p class="howto" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></p>
<p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
<div id="search-panel">
<div class="link-search-wrapper">
<label>
Expand All @@ -1400,14 +1400,17 @@ public static function wp_link_dialog() {
<span class="spinner"></span>
</label>
</div>
<div id="search-results" class="query-results">
<div id="search-results" class="query-results" tabindex="0">
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
<div id="most-recent-results" class="query-results">
<div class="query-notice"><em><?php _e( 'No search term specified. Showing recent items.' ); ?></em></div>
<div id="most-recent-results" class="query-results" tabindex="0">
<div class="query-notice" id="query-notice-message">
<em class="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
<em class="query-notice-hint screen-reader-text"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em>
</div>
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
Expand All @@ -1416,12 +1419,12 @@ public static function wp_link_dialog() {
</div>
</div>
<div class="submitbox">
<div id="wp-link-update">
<input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
</div>
<div id="wp-link-cancel">
<a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
</div>
<div id="wp-link-update">
<input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
</div>
</div>
</form>
</div>
Expand Down
65 changes: 57 additions & 8 deletions wp-includes/css/editor-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -1061,14 +1063,16 @@ i.mce-i-hr:before {

#wp-link-close {
color: #666;
cursor: pointer;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
text-align: center;
background: none;
border: none;
cursor: pointer;
}

#wp-link-close:before {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 10px 4px 6px;
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-right: 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-right: 4px solid #d54e21;
}

#wp-link .query-results em {
font-style: normal;
}

#wp-link li:hover {
background: #eaf2fa;
color: #151515;
Expand Down Expand Up @@ -1285,6 +1333,7 @@ i.mce-i-hr:before {

#wp-link-cancel {
line-height: 25px;
float: right;
}

#wp-link-update {
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/css/editor-rtl.min.css
View file

Large diffs are not rendered by default.

65 changes: 57 additions & 8 deletions wp-includes/css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -1061,14 +1063,16 @@ i.mce-i-hr:before {

#wp-link-close {
color: #666;
cursor: pointer;
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 36px;
height: 36px;
text-align: center;
background: none;
border: none;
cursor: pointer;
}

#wp-link-close:before {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1285,6 +1333,7 @@ i.mce-i-hr:before {

#wp-link-cancel {
line-height: 25px;
float: left;
}

#wp-link-update {
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/css/editor.min.css
View file

Large diffs are not rendered by default.

23 changes: 20 additions & 3 deletions wp-includes/js/wplink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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;

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
}
};

Expand Down Expand Up @@ -506,7 +523,7 @@ var wpLink;

if ( ! results ) {
if ( firstPage ) {
list += '<li class="unselectable"><span class="item-title"><em>' +
list += '<li class="unselectable no-matches-found"><span class="item-title"><em>' +
wpLinkL10n.noMatchesFound + '</em></span></li>';
}
} else {
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/js/wplink.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 77599cd

Please sign in to comment.