wip

wp-admin/js/customize-controls.js

@@ -1615,6 +1615,7 @@
 				} else {
 					expand = function() {
 						section._animateChangeExpanded( function() {
+							backBtn.attr( 'tabindex', '0' );
 							backBtn.trigger( 'focus' );
 							content.css( 'top', '' );
 							container.scrollTop( 0 );
@@ -1660,7 +1661,7 @@
 					}
 				}
 				section._animateChangeExpanded( function() {
-
+					backBtn.attr( 'tabindex', '-1' );
 					sectionTitle.trigger( 'focus' );
 					content.css( 'top', '' );
 
@@ -2714,6 +2715,7 @@
 				} else {
 					expand = function() {
 						section._animateChangeExpanded( function() {
+							backBtn.attr( 'tabindex', '0' );
 							backBtn.trigger( 'focus' );
 							content.css( 'top', '' );
 							container.scrollTop( 0 );
@@ -2744,7 +2746,7 @@
 					}
 				}
 				section._animateChangeExpanded( function() {
-
+					backBtn.attr( 'tabindex', '-1' );
 					sectionTitle.trigger( 'focus' );
 					content.css( 'top', '' );
 
@@ -2964,6 +2966,7 @@
 					} );
 				} else {
 					panel._animateChangeExpanded( function() {
+						backBtn.attr( 'tabindex', '0' );
 						backBtn.trigger( 'focus' );
 						accordionSection.css( 'top', '' );
 						container.scrollTop( 0 );
@@ -4063,7 +4066,7 @@
 		 * @return {void}
 		 */
 		addNewPage: function () {
-			var control = this, promise, toggle, container, input, title, select;
+			var control = this, promise, toggle, container, input, inputError, title, select;
 
 			if ( 'dropdown-pages' !== control.params.type || ! control.params.allow_addition || ! api.Menus ) {
 				return;
@@ -4072,15 +4075,23 @@
 			toggle = control.container.find( '.add-new-toggle' );
 			container = control.container.find( '.new-content-item-wrapper' );
 			input = control.container.find( '.create-item-input' );
+			inputError = control.container.find('.create-item-error');
 			title = input.val();
 			select = control.container.find( 'select' );
 
 			if ( ! title ) {
-				input.addClass( 'invalid' );
+				container.addClass( 'form-invalid' );
+				input.attr('aria-invalid', 'true');
+				input.attr('aria-describedby', inputError.attr('id'));
+				inputError.slideDown( 'fast' );
+				wp.a11y.speak( inputError.text() );
 				return;
 			}
 
-			input.removeClass( 'invalid' );
+			container.removeClass( 'form-invalid' );
+			input.attr('aria-invalid', 'false');
+			input.removeAttr('aria-describedby');
+			inputError.hide();
 			input.attr( 'disabled', 'disabled' );
 
 			// The menus functions add the page, publish when appropriate,
@@ -4715,10 +4726,19 @@
 		 * @param {Object} attachment
 		 */
 		setImageFromAttachment: function( attachment ) {
+			var control = this;
 			this.params.attachment = attachment;
 
 			// Set the Customizer setting; the callback takes care of rendering.
 			this.setting( attachment.id );
+
+			// Set focus to the first relevant button after the icon.
+			_.defer( function() {
+				var firstButton = control.container.find( '.actions .button' ).first();
+				if ( firstButton.length ) {
+					firstButton.focus();
+				}
+			} );
 		}
 	});
 
@@ -4801,7 +4821,8 @@
 		 * @param {Object} attachment
 		 */
 		setImageFromAttachment: function( attachment ) {
-			var sizes = [ 'site_icon-32', 'thumbnail', 'full' ], link,
+			var control = this,
+				sizes = [ 'site_icon-32', 'thumbnail', 'full' ], link,
 				icon;
 
 			_.each( sizes, function( size ) {
@@ -4822,6 +4843,14 @@
 			// Update the icon in-browser.
 			link = $( 'link[rel="icon"][sizes="32x32"]' );
 			link.attr( 'href', icon.url );
+
+			// Set focus to the first relevant button after the icon.
+			_.defer( function() {
+				var firstButton = control.container.find( '.actions .button' ).first();
+				if ( firstButton.length ) {
+					firstButton.focus();
+				}
+			} );
 		},
 
 		/**