sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38770 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-10-10 16:23:23 +00:00
parent 0842857b5c
commit 907d67572a
3 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/wp-admin/css/nav-menus.css
View File

@ -646,9 +646,38 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04);
} }
.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; display: none;
margin: 0 2px; 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);
} }
.menu-item-edit-active .menu-item-settings { .menu-item-edit-active .menu-item-settings {

18
src/wp-admin/includes/class-walker-nav-menu-edit.php
View File

@ -197,16 +197,14 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu {
</label> </label>
</p> </p>
<p class="field-move hide-if-no-js description description-wide"> <fieldset class="field-move hide-if-no-js description description-wide">
<label> <span class="field-move-visual-label" aria-hidden="true"><?php _e( 'Move' ); ?></span>
<span><?php _e( 'Move' ); ?></span> <button type="button" class="button-link menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></button>
<a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a> <button type="button" class="button-link menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></button>
<a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a> <button type="button" class="button-link menus-move menus-move-left" data-dir="left"></button>
<a href="#" class="menus-move menus-move-left" data-dir="left"></a> <button type="button" class="button-link menus-move menus-move-right" data-dir="right"></button>
<a href="#" class="menus-move menus-move-right" data-dir="right"></a> <button type="button" class="button-link menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></button>
<a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a> </fieldset>
</label>
</p>
<div class="menu-item-actions description-wide submitbox"> <div class="menu-item-actions description-wide submitbox">
<?php if ( 'custom' != $item->type && $original_title !== false ) : ?> <?php if ( 'custom' != $item->type && $original_title !== false ) : ?>

7
src/wp-admin/js/nav-menu.js
View File

@ -406,14 +406,13 @@ var wpNavMenu;
} ); } );
// Links for moving items // Links for moving items
menu.on( 'click', '.menus-move', function ( e ) { menu.on( 'click', '.menus-move', function () {
var $this = $( this ), var $this = $( this ),
dir = $this.data( 'dir' ); dir = $this.data( 'dir' );
if ( 'undefined' !== typeof dir ) { if ( 'undefined' !== typeof dir ) {
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir ); api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
} }
e.preventDefault();
}); });
}, },
@ -515,8 +514,8 @@ var wpNavMenu;
*/ */
refreshAdvancedAccessibility : function() { refreshAdvancedAccessibility : function() {
// Hide all links by default // Hide all the move buttons by default.
$( '.menu-item-settings .field-move a' ).hide(); $( '.menu-item-settings .field-move .menus-move' ).hide();
// Mark all menu items as unprocessed // Mark all menu items as unprocessed
$( 'a.item-edit' ).data( 'needs_accessibility_refresh', true ); $( 'a.item-edit' ).data( 'needs_accessibility_refresh', true );