Changeset 29321

Timestamp:

07/29/2014 03:15:34 AM (10 years ago)

Author:

azaozz

Message:

wpLink: add keyboard navigation, improve accessibility. Props afercia, fixes #28897.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (5 diffs)
• css/editor.css (modified) (8 diffs)
• js/wplink.js (modified) (6 diffs)

trunk/src/wp-includes/class-wp-editor.php

@@ -1377 +1377 @@
         <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">
@@ -1392 +1392 @@
                 </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">
@@ -1401 +1401 @@
                     </label>
                 </div>
-                <div id="search-results" class="query-results">
+                <div id="search-results" class="query-results" tabindex="0">
                     <ul></ul>
                     <div class="river-waiting">
@@ -1407 +1407 @@
                     </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">
@@ -1417 +1420 @@
         </div>
         <div class="submitbox">
+            <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 id="wp-link-cancel">
-                <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
             </div>
         </div>

trunk/src/wp-includes/css/editor.css

@@ -80 +80 @@
 
 .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;
@@ -86 +87 @@
     -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);
@@ -1062 +1064 @@
 #wp-link-close {
     color: #666;
-    cursor: pointer;
     padding: 0;
     position: absolute;
@@ -1070 +1071 @@
     height: 36px;
     text-align: center;
+    background: none;
+    border: none;
+    cursor: pointer;
 }
 
@@ -1088 +1092 @@
 }
 
+#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;
@@ -1134 +1148 @@
 #wp-link p.howto {
     margin: 3px 0;
+}
+
+#wp-link p.howto a {
+    text-decoration: none;
+    color: inherit;
 }
 
@@ -1199 +1218 @@
 }
 
-#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;
 }
 
@@ -1286 +1334 @@
 #wp-link-cancel {
     line-height: 25px;
+    float: left;
 }
 

trunk/src/wp-includes/js/wplink.js

@@ -32 +32 @@
             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 );
@@ -44 +49 @@
             });
 
-            $( '#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() {
@@ -336 +350 @@
                 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();
@@ -392 +408 @@
         },
 
-        toggleInternalLinking: function() {
+        toggleInternalLinking: function( event ) {
             var visible = inputs.wrap.hasClass( 'search-panel-visible' );
 
@@ -398 +414 @@
             setUserSetting( 'wplink', visible ? '0' : '1' );
             inputs[ ! visible ? 'search' : 'url' ].focus();
+            event.preventDefault();
         }
     };
@@ -507 +524 @@
             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>';
                 }