Changeset 41876 for trunk/src/wp-admin/plugin-editor.php

Timestamp:

10/16/2017 05:58:07 PM (8 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.

File:

• trunk/src/wp-admin/plugin-editor.php (modified) (1 diff)

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>