<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[41876] trunk/src: Accessibility: Improve the File Editors interstitial warning.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/41876">41876</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/41876","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>afercia</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-10-16 17:58:07 +0000 (Mon, 16 Oct 2017)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Accessibility: Improve the File Editors interstitial warning.
The warning displayed upon first visit on the File Editors introduced in <a href="https://core.trac.wordpress.org/changeset/41774">[41774]</a>
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 <a href="https://core.trac.wordpress.org/ticket/42110">#42110</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjsthemeplugineditorjs">trunk/src/wp-admin/js/theme-plugin-editor.js</a></li>
<li><a href="#trunksrcwpadminplugineditorphp">trunk/src/wp-admin/plugin-editor.php</a></li>
<li><a href="#trunksrcwpadminthemeeditorphp">trunk/src/wp-admin/theme-editor.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminjsthemeplugineditorjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/theme-plugin-editor.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/theme-plugin-editor.js 2017-10-16 17:05:25 UTC (rev 41875)
+++ trunk/src/wp-admin/js/theme-plugin-editor.js 2017-10-16 17:58:07 UTC (rev 41876)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -51,9 +51,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> component.warning = $( '.file-editor-warning' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( component.warning.length > 0 ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( 'body' ).addClass( 'modal-open' );
- component.warning.find( '.file-editor-warning-go-back' ).focus();
- component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ component.showWarning();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( false !== component.codeEditor ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -78,6 +76,62 @@
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * 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();
+ }
+ };
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Dismiss the warning modal.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.9.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -91,10 +145,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Hide modal.
</span><span class="cx" style="display: block; padding: 0 10px"> component.warning.remove();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '#wpwrap' ).removeAttr( 'aria-hidden' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $( 'body' ).removeClass( 'modal-open' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Return focus - is this a trap?
- component.instance.codemirror.focus();
</del><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span></span></pre></div>
<a id="trunksrcwpadminplugineditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/plugin-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/plugin-editor.php 2017-10-16 17:05:25 UTC (rev 41875)
+++ trunk/src/wp-admin/plugin-editor.php 2017-10-16 17:58:07 UTC (rev 41876)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -292,13 +292,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $return_url = admin_url( '/' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="notification-dialog-background"></div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="notification-dialog">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="file-editor-warning-content">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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’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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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’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>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="file-editor-warning-dismiss button button-primary"><?php _e( 'I understand' ); ?></button>
</span></span></pre></div>
<a id="trunksrcwpadminthemeeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/theme-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/theme-editor.php 2017-10-16 17:05:25 UTC (rev 41875)
+++ trunk/src/wp-admin/theme-editor.php 2017-10-16 17:58:07 UTC (rev 41876)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -297,22 +297,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $return_url = admin_url( '/' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="notification-dialog-background"></div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="notification-dialog">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="file-editor-warning-content">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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’t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There’s no need to change your CSS here — you can edit and live preview CSS changes in WordPress’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’s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?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’t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There’s no need to change your CSS here — you can edit and live preview CSS changes in WordPress’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’s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
- <p>
</del><span class="cx" style="display: block; padding: 0 10px"> <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="file-editor-warning-dismiss button button-primary"><?php _e( 'I understand' ); ?></button>
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2017-10-16 17:05:25 UTC (rev 41875)
+++ trunk/src/wp-includes/script-loader.php 2017-10-16 17:58:07 UTC (rev 41876)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -469,7 +469,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'wp-codemirror' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'wp-util', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'saveError' => __( 'Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.' ),
</span></span></pre>
</div>
</div>
</body>
</html>