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

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.

File:

• trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php (modified) (1 diff)

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">