Ticket #33029: 33029.5.patch

src/wp-admin/css/common.css

@@ -164 +164 @@
         display: none;
 }
 
+.focus-placeholder {
+        /* temporary styling for debugging */
+        width: 300px;
+        height: 1.4em;
+        position: fixed;
+        top: 7px;
+        left: 50%;
+        z-index: 100000;
+        margin-left: -150px;
+        text-align: center;
+        background: #fafafa;
+}
+
+.focus-placeholder:focus {
+        /* temporary styling for debugging */
+        outline: 2px solid red;
+}
+
 /* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */
 .widget-top,
 .menu-item-handle,

src/wp-admin/js/common.js

@@ -408 +408 @@
 
                 $button.on( 'click.wp-dismiss-notice', function( event ) {
                         event.preventDefault();
+                        wp.a11y.focusPlaceholder( $this, commonL10n.dismissed );
                         $this.fadeTo( 100 , 0, function() {
                                 $(this).slideUp( 100, function() {
                                         $(this).remove();

src/wp-includes/js/wp-a11y.js

@@ -82 +82 @@
                 }
         });
 
+        /**
+         * Focus placeholder to use when focused elements get hidden or removed from the DOM.
+         *
+         * @since 4.4.0
+         *
+         * @param {jQuery} $el     The element that is going to be hidden or removed from the DOM.
+         * @param {String} message Optional. A message to be used as the focus placeholder content.
+         *                         Screen readers will read out the message as soon as the placeholder receives focus.
+         */
+        function focusPlaceholder( $el, message ) {
+                var focusPlaceHolder;
+
+                if ( ! $el.length ) {
+                        return;
+                }
+
+                focusPlaceHolder = $( '<span>', {
+                        'tabindex': '0',
+                        'class': 'focus-placeholder will-be-screen-reader-text'
+                });
+
+                if ( message ) {
+                        focusPlaceHolder.text( message );
+                }
+
+                focusPlaceHolder
+                        .insertBefore( $el )
+                        .focus()
+                        .on( 'blur', function() {
+                                $( this ).remove();
+                        });
+        }
+
         wp.a11y = wp.a11y || {};
         wp.a11y.speak = speak;
+        wp.a11y.focusPlaceholder = focusPlaceholder;
 
 }( window.wp, window.jQuery ));

src/wp-includes/script-loader.php

@@ -81 +81 @@
         did_action( 'init' ) && $scripts->localize( 'common', 'commonL10n', array(
                 'warnDelete' => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
                 'dismiss'    => __( 'Dismiss this notice.' ),
+                'dismissed'  => __( 'Notice dismissed.' ),
         ) );
 
         $scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );