Changeset 41876

Timestamp:

10/16/2017 05:58:07 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve the File Editors interstitial warning.

The warning displayed upon first visit on the File Editors introduced in [41774]
needs to be the only perceivable content in the page for users of assistive
technologies. It looks like a modal but it's not exactly an ARIA dialog, not an
ARIA alert either, and needs some special treatment.

• constrains tabbing within the modal
• uses wp.a11y.speak() to make screen readers announce the modal message
• hides all the other page content from assistive technologies using aria-hidden="true"

This way, even if users miss the speak message, the warning is actually the only
perceivable content in the page.

Fixes #42110.

Location:

trunk/src

Files:

• wp-admin/js/theme-plugin-editor.js (modified) (3 diffs)
• wp-admin/plugin-editor.php (modified) (1 diff)
• wp-admin/theme-editor.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/js/theme-plugin-editor.js

@@ -52 +52 @@
 
         if ( component.warning.length > 0 ) {
-            $( 'body' ).addClass( 'modal-open' );
-            component.warning.find( '.file-editor-warning-go-back' ).focus();
-            component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning );
+            component.showWarning();
         }
 
@@ -79 +77 @@
 
     /**
+     * Set up and display the warning modal.
+     *
+     * @since 4.9.0
+     * @returns {void}
+     */
+    component.showWarning = function() {
+        // Get the text within the modal.
+        var rawMessage = component.warning.find( '.file-editor-warning-message' ).text();
+        // Hide all the #wpwrap content from assistive technologies.
+        $( '#wpwrap' ).attr( 'aria-hidden', 'true' );
+        // Detach the warning modal from its position and append it to the body.
+        $( document.body )
+            .addClass( 'modal-open' )
+            .append( component.warning.detach() );
+        // Reveal the modal and set focus on the go back button.
+        component.warning
+            .removeClass( 'hidden' )
+            .find( '.file-editor-warning-go-back' ).focus();
+        // Get the links and buttons within the modal.
+        component.warningTabbables = component.warning.find( 'a, button' );
+        // Attach event handlers.
+        component.warningTabbables.on( 'keydown', component.constrainTabbing );
+        component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning );
+        // Make screen readers announce the warning message after a short delay (necessary for some screen readers).
+        setTimeout( function() {
+            wp.a11y.speak( wp.sanitize.stripTags( rawMessage.replace( /\s+/g, ' ' ) ), 'assertive' );
+        }, 1000 );
+    };
+
+    /**
+     * Constrain tabbing within the warning modal.
+     *
+     * @since 4.9.0
+     * @param {object} event jQuery event object.
+     * @returns {void}
+     */
+    component.constrainTabbing = function( event ) {
+        var firstTabbable, lastTabbable;
+
+        if ( 9 !== event.which ) {
+            return;
+        }
+
+        firstTabbable = component.warningTabbables.first()[0];
+        lastTabbable = component.warningTabbables.last()[0];
+
+        if ( lastTabbable === event.target && ! event.shiftKey ) {
+            firstTabbable.focus();
+            event.preventDefault();
+        } else if ( firstTabbable === event.target && event.shiftKey ) {
+            lastTabbable.focus();
+            event.preventDefault();
+        }
+    };
+
+    /**
      * Dismiss the warning modal.
      *
@@ -92 +146 @@
         // Hide modal.
         component.warning.remove();
+        $( '#wpwrap' ).removeAttr( 'aria-hidden' );
         $( 'body' ).removeClass( 'modal-open' );
-
-        // Return focus - is this a trap?
-        component.instance.codemirror.focus();
     };
 

trunk/src/wp-admin/plugin-editor.php

@@ -293 +293 @@
     }
 ?>
-<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
+<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
     <div class="notification-dialog-background"></div>
-    <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
+    <div class="notification-dialog">
         <div class="file-editor-warning-content">
-            <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
-            <p><?php _e( 'You appear to be making direct edits to your plugin in the WordPress dashboard. We recommend that you don&#8217;t! Editing plugins directly may introduce incompatibilities that break your theme or other plugins, and can leave you unable to log back in to WordPress and undo changes.' ); ?></p>
-            <p><?php _e( 'If you absolutely have to edit this plugin, create a copy with a new name and hang on to the original version, so you can re-enable a functional version if something goes wrong.' ); ?></p>
+            <div class="file-editor-warning-message">
+                <h1><?php _e( 'Heads up!' ); ?></h1>
+                <p><?php _e( 'You appear to be making direct edits to your plugin in the WordPress dashboard. We recommend that you don&#8217;t! Editing plugins directly may introduce incompatibilities that break your theme or other plugins, and can leave you unable to log back in to WordPress and undo changes.' ); ?></p>
+                <p><?php _e( 'If you absolutely have to edit this plugin, create a copy with a new name and hang on to the original version, so you can re-enable a functional version if something goes wrong.' ); ?></p>
+            </div>
             <p>
                 <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>

trunk/src/wp-admin/theme-editor.php

@@ -298 +298 @@
     }
 ?>
-<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
+<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
     <div class="notification-dialog-background"></div>
-    <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
+    <div class="notification-dialog">
         <div class="file-editor-warning-content">
-            <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
-            <p>
-                <?php
-                echo sprintf(
-                    /* translators: %s is a link to Custom CSS section in the Customizer. */
-                    __( 'You appear to be making direct edits to your theme in the WordPress dashboard. We recommend that you don&#8217;t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There&#8217;s no need to change your CSS here &mdash; you can edit and live preview CSS changes in WordPress&#8217;s <a href="%s">built in CSS editor</a>.' ),
-                    esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
-                );
-                ?>
-            </p>
-            <p><?php _e( 'If you decide to go ahead with direct edits anyway, make sure to back up all your site&#8217;s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
+            <div class="file-editor-warning-message">
+                <h1><?php _e( 'Heads up!' ); ?></h1>
+                <p>
+                    <?php
+                    echo sprintf(
+                        /* translators: %s is a link to Custom CSS section in the Customizer. */
+                        __( 'You appear to be making direct edits to your theme in the WordPress dashboard. We recommend that you don&#8217;t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There&#8217;s no need to change your CSS here &mdash; you can edit and live preview CSS changes in WordPress&#8217;s <a href="%s">built in CSS editor</a>.' ),
+                        esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
+                    );
+                    ?>
+                </p>
+                <p><?php _e( 'If you decide to go ahead with direct edits anyway, make sure to back up all your site&#8217;s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
+            </div>
             <p>
                 <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>

trunk/src/wp-includes/script-loader.php

@@ -470 +470 @@
     $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
     $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'wp-codemirror' ) );
-    $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'wp-util', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
+    $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'wp-util', 'wp-sanitize', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
     did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( array(
         'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),