Changeset 36991

Timestamp:

03/14/2016 08:54:58 PM (9 years ago)

Author:

azaozz

Message:

wpLink: fix accessibility issues:

• Add role=dialog and an aria-labelledby attribute to the modal container.
• Change the modal title to h1.
• Remove one   that gets read out as blank by screen readers.
• Replace the Cancel link with a button.
• Clean up unused CSS.

Props afercia.
Fixes #30468.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (3 diffs)
• css/editor.css (modified) (6 diffs)
• js/wplink.js (modified) (1 diff)

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

@@ -1404 +1404 @@
         ?>
         <div id="wp-link-backdrop" style="display: none"></div>
-        <div id="wp-link-wrap" class="wp-core-ui" style="display: none">
+        <div id="wp-link-wrap" class="wp-core-ui" style="display: none" role="dialog" aria-labelledby="link-modal-title">
         <form id="wp-link" tabindex="-1">
         <?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
-        <div id="link-modal-title">
-            <?php _e( 'Insert/edit link' ) ?>
-            <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
-        </div>
+        <h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1>
+        <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
         <div id="link-selector">
             <div id="link-options">
@@ -1422 +1420 @@
                 </div>
                 <div class="link-target">
-                    <label><span>&nbsp;</span>
+                    <label><span></span>
                     <input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new tab' ); ?></label>
                 </div>
@@ -1429 +1427 @@
         <div class="submitbox">
             <div id="wp-link-cancel">
-                <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
+                <button type="button" class="button"><?php _e( 'Cancel' ); ?></button>
             </div>
             <div id="wp-link-update">

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

@@ -1075 +1075 @@
     margin: 1px 0 0;
     line-height: 150%;
-    border: 0 none;
+    border: 0;
     outline: none;
     display: block;
@@ -1389 +1389 @@
     font-weight: 600;
     line-height: 36px;
+    margin: 0;
     padding: 0 36px 0 16px;
-    top: 0;
-    right: 0;
-    left: 0;
 }
 
@@ -1439 +1437 @@
 }
 
-#wp-link-wrap.search-panel-visible #link-selector {
-    -webkit-overflow-scrolling: touch;
-}
-
 #wp-link ol,
 #wp-link ul {
@@ -1495 +1489 @@
 }
 
-#wp-link li {
-    clear: both;
-    margin-bottom: 0;
-    border-bottom: 1px solid #f1f1f1;
-    color: #32373c;
-    padding: 4px 6px 4px 10px;
-    cursor: pointer;
-    position: relative;
-}
-
-#wp-link li:hover {
-    background: #eaf2fa;
-    color: #151515;
-}
-
-#wp-link li.unselectable {
-    border-bottom: 1px solid #ddd;
-}
-
-#wp-link li.unselectable:hover {
-    background: #fff;
-    cursor: auto;
-    color: #32373c;
-}
-
-#wp-link li.selected {
-    background: #ddd;
-    color: #32373c;
-}
-
-#wp-link li.selected .item-title {
-    font-weight: bold;
-}
-
-#wp-link li:last-child {
-    border: none;
-}
-
-#wp-link .item-title {
-    display: inline-block;
-    width: 80%;
-    width: -webkit-calc(100% - 68px);
-    width: calc(100% - 68px);
-    word-wrap: break-word;
-}
-
-#wp-link .item-info {
-    text-transform: uppercase;
-    color: #666;
-    font-size: 11px;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-}
-
 #wp-link .submitbox {
     padding: 8px 16px;
@@ -1572 +1511 @@
 #wp-link-submit {
     float: right;
-    margin-bottom: 0;
 }
 
@@ -1584 +1522 @@
     }
 
-    #wp-link-wrap.search-panel-visible #link-selector {
-        bottom: 52px;
-    }
-
     #wp-link-cancel {
         line-height: 32px;
+    }
+
+    #wp-link .link-target {
+        padding-top: 10px;
+    }
+
+    #wp-link .submitbox .button {
+        margin-bottom: 0;
     }
 }

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

@@ -36 +36 @@
             });
 
-            inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
+            inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel button' ).click( function( event ) {
                 event.preventDefault();
                 wpLink.close();