--- a/wp/wp-admin/js/widgets.js Mon Oct 14 18:06:33 2019 +0200
+++ b/wp/wp-admin/js/widgets.js Mon Oct 14 18:28:13 2019 +0200
@@ -1,9 +1,13 @@
-/*global ajaxurl, isRtl */
-var wpWidgets;
+/**
+ * @output wp-admin/js/widgets.js
+ */
+
+/* global ajaxurl, isRtl, wpWidgets */
+
(function($) {
var $document = $( document );
-wpWidgets = {
+window.wpWidgets = {
/**
* A closed Sidebar that gets a Widget dragged over it.
*
@@ -21,7 +25,8 @@
l10n: {
save: '{save}',
saved: '{saved}',
- saveAlert: '{saveAlert}'
+ saveAlert: '{saveAlert}',
+ widgetAdded: '{widgetAdded}'
},
/**
@@ -176,19 +181,16 @@
widget.removeClass( 'open' );
});
}
- e.preventDefault();
} else if ( target.hasClass('widget-control-save') ) {
wpWidgets.save( target.closest('div.widget'), 0, 1, 0 );
e.preventDefault();
} else if ( target.hasClass('widget-control-remove') ) {
wpWidgets.save( target.closest('div.widget'), 1, 1, 0 );
- e.preventDefault();
} else if ( target.hasClass('widget-control-close') ) {
widget = target.closest('div.widget');
widget.removeClass( 'open' );
toggleBtn.attr( 'aria-expanded', 'false' );
wpWidgets.close( widget );
- e.preventDefault();
} else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) {
wpWidgets.removeInactiveWidgets();
e.preventDefault();
@@ -245,6 +247,8 @@
/**
* Open Sidebar when a Widget gets dragged over it.
*
+ * @ignore
+ *
* @param {object} event jQuery event object.
*/
over: function( event ) {
@@ -268,6 +272,8 @@
/**
* Close Sidebar when the Widget gets dragged out of it.
*
+ * @ignore
+ *
* @param {object} event jQuery event object.
*/
out: function( event ) {
@@ -429,35 +435,53 @@
$( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
var $element = $( element ),
name = $element.find( '.sidebar-name h2' ).text(),
+ ariaLabel = $element.find( '.sidebar-name' ).data( 'add-to' ),
id = $element.find( '.widgets-sortables' ).attr( 'id' ),
- li = $('<li tabindex="0">').text( $.trim( name ) );
+ li = $( '<li>' ),
+ button = $( '<button>', {
+ type: 'button',
+ 'aria-pressed': 'false',
+ 'class': 'widgets-chooser-button',
+ 'aria-label': ariaLabel
+ } ).text( $.trim( name ) );
+
+ li.append( button );
if ( index === 0 ) {
li.addClass( 'widgets-chooser-selected' );
+ button.attr( 'aria-pressed', 'true' );
}
selectSidebar.append( li );
li.data( 'sidebarId', id );
});
- $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
- var $widget = $(this).closest( '.widget' );
+ $( '#available-widgets .widget .widget-top' ).on( 'click.widgets-chooser', function() {
+ var $widget = $( this ).closest( '.widget' ),
+ toggleButton = $( this ).find( '.widget-action' ),
+ chooserButtons = selectSidebar.find( '.widgets-chooser-button' );
if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) {
+ toggleButton.attr( 'aria-expanded', 'false' );
self.closeChooser();
} else {
// Open the chooser
self.clearWidgetSelection();
$( '#widgets-left' ).addClass( 'chooser' );
+ // Add CSS class and insert the chooser after the widget description.
$widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser );
-
+ // Open the chooser with a slide down animation.
chooser.slideDown( 300, function() {
- selectSidebar.find('.widgets-chooser-selected').focus();
+ // Update the toggle button aria-expanded attribute after previous DOM manipulations.
+ toggleButton.attr( 'aria-expanded', 'true' );
});
- selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
- selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
- $(this).addClass( 'widgets-chooser-selected' );
+ chooserButtons.on( 'click.widgets-chooser', function() {
+ selectSidebar.find( '.widgets-chooser-selected' ).removeClass( 'widgets-chooser-selected' );
+ chooserButtons.attr( 'aria-pressed', 'false' );
+ $( this )
+ .attr( 'aria-pressed', 'true' )
+ .closest( 'li' ).addClass( 'widgets-chooser-selected' );
} );
}
});
@@ -473,15 +497,7 @@
self.closeChooser();
}
}).on( 'keyup.widgets-chooser', function( event ) {
- if ( event.which === $.ui.keyCode.ENTER ) {
- if ( $( event.target ).hasClass( 'widgets-chooser-cancel' ) ) {
- // Close instead of adding when pressing Enter on the Cancel button
- self.closeChooser();
- } else {
- self.addWidget( chooser );
- self.closeChooser();
- }
- } else if ( event.which === $.ui.keyCode.ESCAPE ) {
+ if ( event.which === $.ui.keyCode.ESCAPE ) {
self.closeChooser();
}
});
@@ -701,15 +717,20 @@
// Cannot use a callback in the animation above as it fires twice,
// have to queue this "by hand".
widget.find( '.widget-title' ).trigger('click');
+ // At the end of the animation, announce the widget has been added.
+ window.wp.a11y.speak( wpWidgets.l10n.widgetAdded, 'assertive' );
}, 250 );
},
closeChooser: function() {
- var self = this;
+ var self = this,
+ widgetInQuestion = $( '#available-widgets .widget-in-question' );
$( '.widgets-chooser' ).slideUp( 200, function() {
$( '#wpbody-content' ).append( this );
self.clearWidgetSelection();
+ // Move focus back to the toggle button.
+ widgetInQuestion.find( '.widget-action' ).attr( 'aria-expanded', 'false' ).focus();
});
},