Changeset 36016

Timestamp:

12/19/2015 12:16:30 AM (7 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>