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.


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

View File

@@ -469,7 +469,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
$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.' ),
'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.' ),