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

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.


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);
}
.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);
}
.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>
</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">
<?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
menu.on( 'click', '.menus-move', function ( e ) {
menu.on( 'click', '.menus-move', function () {
var $this = $( this ),
dir = $this.data( 'dir' );
if ( 'undefined' !== typeof dir ) {
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
}
e.preventDefault();
});
},
@ -515,8 +514,8 @@ var wpNavMenu;
*/
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
$( 'a.item-edit' ).data( 'needs_accessibility_refresh', true );