vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-05 21:24:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Improve the File Editors interstitial warning.

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41876 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2017-10-16 17:58:07 +00:00
parent 0bfa2d7468
commit 9dfb758afc
4 changed files with 81 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/wp-admin/plugin-editor.php
View File

@@ -292,13 +292,15 @@ if ( ! in_array( 'plugin_editor_notice', $dismissed_pointers, true ) ) :
$return_url = admin_url( '/' );
}
?>
<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>
<button type="button" class="file-editor-warning-dismiss button button-primary"><?php _e( 'I understand' ); ?></button>