Changeset 36016

Timestamp:

12/19/2015 12:16:30 AM (11 years ago)

Author:

afercia

Message:

Accessibility: Remove title attributes and improve accessibility on the "no-js" Menus screen.

When JavaScript is off, the reorder menu item and Edit menu item links now use aria-label
attributes instead of title attributes.

Fixes #35134.

Location:

trunk/src/wp-admin

Files:

• css/nav-menus.css (modified) (3 diffs)
• includes/class-walker-nav-menu-edit.php (modified) (2 diffs)

trunk/src/wp-admin/css/nav-menus.css

@@ -619 +619 @@
 }
 
+.no-js.nav-menus-php .item-edit {
+        position: static;
+        float: right;
+        width: auto;
+        height: auto;
+        margin-right: -10px !important;
+        padding: 12px 0;
+        color: #0073aa;
+        text-decoration: underline;
+        font-size: 12px;
+        line-height: 18px;
+        text-indent: 0;
+}
+
 .nav-menus-php .item-edit:before {
         margin-top: 10px;
@@ -628 +642 @@
 }
 
+.no-js.nav-menus-php .item-edit:before {
+        display: none;
+}
+
 .rtl .nav-menus-php .item-edit:before {
         text-indent: 1px; /* account for the dashicon alignment */
@@ -639 +657 @@
 .nav-menus-php .item-edit:focus:before {
         -webkit-box-shadow:
-        0 0 0 1px #5b9dd9,
+                0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30, 140, 190, .8);
-    box-shadow:
-        0 0 0 1px #5b9dd9,
+        box-shadow:
+                0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30, 140, 190, .8);
 }

trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

@@ -127 +127 @@
                                                                         'move-menu_item'
                                                                 );
-                                                        ?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">&#8593;</abbr></a>
+                                                        ?>" class="item-move-up" aria-label="<?php esc_attr_e( 'Move up' ) ?>">&#8593;</a>
                                                         |
                                                         <a href="<?php
@@ -140 +140 @@
                                                                         'move-menu_item'
                                                                 );
-                                                        ?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">&#8595;</abbr></a>
+                                                        ?>" class="item-move-down" aria-label="<?php esc_attr_e( 'Move down' ) ?>">&#8595;</a>
                                                 </span>
-                                                <a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php
+                                                <a class="item-edit" id="edit-<?php echo $item_id; ?>" href="<?php
                                                         echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) );
-                                                ?>"><?php _e( 'Edit Menu Item' ); ?></a>
+                                                ?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><?php _e( 'Edit' ); ?></a>
                                         </span>
                                 </div>