Changeset 38770

Timestamp:

10/10/2016 04:23:23 PM (8 years ago)

Author:

afercia

Message:

Accessibility: Improve the UI controls to move the Menu items.

On the Menus screen, the links to move menu items behave like buttons: they
perform an action so they should be real buttons to be correctly reported to
assistive technologies. Since they're logically grouped controls, they should
also be wrapped in a <fieldset> element for better semantics and accessibility.

Props Cheffheid.
Fixes #35578.

Location:

trunk/src/wp-admin

Files:

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

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

@@ -647 +647 @@
 }
 
-.menu-item-settings .field-move a {
+.menu-item-settings .field-move {
+    margin: 3px 0 5px;
+    line-height: 1.5;
+}
+
+.field-move-visual-label {
+    float: left;
+    margin-right: 4px;
+    font-style: italic;
+}
+
+.menu-item-settings .field-move .button-link {
     display: none;
     margin: 0 2px;
+    color: #0073aa;
+    font-style: italic;
+    text-decoration: underline;
+}
+
+.menu-item-settings .field-move .button-link:hover,
+.menu-item-settings .field-move .button-link:active {
+    color: #00a0d2;
+}
+
+.menu-item-settings .field-move .button-link:focus {
+    color: #124964;
+    -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);
 }
 

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

@@ -198 +198 @@
                 </p>
 
-                <p class="field-move hide-if-no-js description description-wide">
-                    <label>
-                        <span><?php _e( 'Move' ); ?></span>
-                        <a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a>
-                        <a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a>
-                        <a href="#" class="menus-move menus-move-left" data-dir="left"></a>
-                        <a href="#" class="menus-move menus-move-right" data-dir="right"></a>
-                        <a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a>
-                    </label>
-                </p>
+                <fieldset class="field-move hide-if-no-js description description-wide">
+                    <span class="field-move-visual-label" aria-hidden="true"><?php _e( 'Move' ); ?></span>
+                    <button type="button" class="button-link menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></button>
+                    <button type="button" class="button-link menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></button>
+                    <button type="button" class="button-link menus-move menus-move-left" data-dir="left"></button>
+                    <button type="button" class="button-link menus-move menus-move-right" data-dir="right"></button>
+                    <button type="button" class="button-link menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></button>
+                </fieldset>
 
                 <div class="menu-item-actions description-wide submitbox">

trunk/src/wp-admin/js/nav-menu.js

@@ -407 +407 @@
 
             // Links for moving items
-            menu.on( 'click', '.menus-move', function ( e ) {
+            menu.on( 'click', '.menus-move', function () {
                 var $this = $( this ),
                     dir = $this.data( 'dir' );
@@ -414 +414 @@
                     api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
                 }
-                e.preventDefault();
             });
         },
@@ -516 +515 @@
         refreshAdvancedAccessibility : function() {
 
-            // Hide all links by default
-            $( '.menu-item-settings .field-move a' ).hide();
+            // Hide all the move buttons by default.
+            $( '.menu-item-settings .field-move .menus-move' ).hide();
 
             // Mark all menu items as unprocessed