Add `wp.a11y.speak()` for audible alerts/updates in screen readers. Props afercia, GrahamArmfield (for the idea), iseulde. Fixes #31368.
git-svn-id: https://develop.svn.wordpress.org/trunk@31594 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
753b3c6d38
commit
0778a17875
|
@ -118,8 +118,6 @@ do_action( 'customize_controls_print_scripts' );
|
|||
<body class="<?php echo esc_attr( $body_class ); ?>">
|
||||
<div class="wp-full-overlay expanded">
|
||||
<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
|
||||
<div id="screen-reader-messages" role="status" aria-live="polite" aria-relevant="all" aria-atomic="true" class="screen-reader-text"></div>
|
||||
|
||||
<div id="customize-header-actions" class="wp-full-overlay-header">
|
||||
<?php
|
||||
$save_text = $wp_customize->is_theme_active() ? __( 'Save & Publish' ) : __( 'Save & Activate' );
|
||||
|
|
|
@ -685,10 +685,10 @@
|
|||
|
||||
if ( isMoveUp ) {
|
||||
self.moveUp();
|
||||
$( '#screen-reader-messages' ).text( l10n.widgetMovedUp );
|
||||
wp.a11y.speak( l10n.widgetMovedUp );
|
||||
} else {
|
||||
self.moveDown();
|
||||
$( '#screen-reader-messages' ).text( l10n.widgetMovedDown );
|
||||
wp.a11y.speak( l10n.widgetMovedDown );
|
||||
}
|
||||
|
||||
$( this ).focus(); // re-focus after the container was moved
|
||||
|
|
|
@ -107,6 +107,7 @@ window.wp = window.wp || {};
|
|||
|
||||
$message.addClass( 'updating-message' );
|
||||
$message.text( wp.updates.l10n.updating );
|
||||
wp.a11y.speak( wp.updates.l10n.updatingMsg );
|
||||
|
||||
if ( wp.updates.updateLock ) {
|
||||
wp.updates.updateQueue.push( {
|
||||
|
@ -153,6 +154,7 @@ window.wp = window.wp || {};
|
|||
|
||||
$message.removeClass( 'updating-message' ).addClass( 'updated-message' );
|
||||
$message.text( wp.updates.l10n.updated );
|
||||
wp.a11y.speak( wp.updates.l10n.updatedMsg );
|
||||
|
||||
wp.updates.decrementCount( 'plugin' );
|
||||
};
|
||||
|
@ -173,6 +175,7 @@ window.wp = window.wp || {};
|
|||
}
|
||||
$message.removeClass( 'updating-message' );
|
||||
$message.text( wp.updates.l10n.updateFailed );
|
||||
wp.a11y.speak( wp.updates.l10n.updateFailed );
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -198,6 +201,7 @@ window.wp = window.wp || {};
|
|||
|
||||
$message.addClass( 'updating-message' );
|
||||
$message.text( wp.updates.l10n.installing );
|
||||
wp.a11y.speak( wp.updates.l10n.installingMsg );
|
||||
|
||||
if ( wp.updates.updateLock ) {
|
||||
wp.updates.updateQueue.push( {
|
||||
|
@ -234,6 +238,7 @@ window.wp = window.wp || {};
|
|||
|
||||
$message.removeClass( 'updating-message' ).addClass( 'updated-message button-disabled' );
|
||||
$message.text( wp.updates.l10n.installed );
|
||||
wp.a11y.speak( wp.updates.l10n.installedMsg );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
window.wp = window.wp || {};
|
||||
|
||||
( function ( wp, $ ) {
|
||||
'use strict';
|
||||
|
||||
var $container;
|
||||
|
||||
/**
|
||||
* Update the ARIA live notification area text node.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
* @param {String} message
|
||||
*/
|
||||
function speak( message ) {
|
||||
if ( $container ) {
|
||||
$container.text( message );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize wp.a11y and define ARIA live notification area.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*/
|
||||
$( document ).ready( function() {
|
||||
$container = $( '#wp-a11y-speak' );
|
||||
|
||||
if ( ! $container.length ) {
|
||||
$container = $( '<div>', {
|
||||
id: 'wp-a11y-speak',
|
||||
role: 'status',
|
||||
'aria-live': 'polite',
|
||||
'aria-relevant': 'all',
|
||||
'aria-atomic': 'true',
|
||||
'class': 'screen-reader-text'
|
||||
} );
|
||||
|
||||
$( document.body ).append( $container );
|
||||
}
|
||||
} );
|
||||
|
||||
wp.a11y = wp.a11y || {};
|
||||
wp.a11y.speak = speak;
|
||||
|
||||
} )( window.wp, window.jQuery );
|
|
@ -82,6 +82,8 @@ function wp_default_scripts( &$scripts ) {
|
|||
'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.")
|
||||
) );
|
||||
|
||||
$scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );
|
||||
|
||||
$scripts->add( 'sack', "/wp-includes/js/tw-sack$suffix.js", array(), '1.6.1', 1 );
|
||||
|
||||
$scripts->add( 'quicktags', "/wp-includes/js/quicktags$suffix.js", array(), false, 1 );
|
||||
|
@ -380,7 +382,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
|
||||
$scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r7', 1 );
|
||||
|
||||
$scripts->add( 'customize-base', "/wp-includes/js/customize-base$suffix.js", array( 'jquery', 'json2', 'underscore' ), false, 1 );
|
||||
$scripts->add( 'customize-base', "/wp-includes/js/customize-base$suffix.js", array( 'jquery', 'json2', 'underscore', 'wp-a11y' ), false, 1 );
|
||||
$scripts->add( 'customize-loader', "/wp-includes/js/customize-loader$suffix.js", array( 'customize-base' ), false, 1 );
|
||||
$scripts->add( 'customize-preview', "/wp-includes/js/customize-preview$suffix.js", array( 'customize-base' ), false, 1 );
|
||||
$scripts->add( 'customize-models', "/wp-includes/js/customize-models.js", array( 'underscore', 'backbone' ), false, 1 );
|
||||
|
@ -532,7 +534,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
'ays' => __('Are you sure you want to install this plugin?')
|
||||
) );
|
||||
|
||||
$scripts->add( 'updates', "/wp-admin/js/updates$suffix.js", array( 'jquery', 'wp-util' ) );
|
||||
$scripts->add( 'updates', "/wp-admin/js/updates$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ) );
|
||||
did_action( 'init' ) && $scripts->localize( 'updates', '_wpUpdatesSettings', array(
|
||||
'ajax_nonce' => wp_create_nonce( 'updates' ),
|
||||
'l10n' => array(
|
||||
|
@ -543,6 +545,10 @@ function wp_default_scripts( &$scripts ) {
|
|||
'installing' => __( 'Installing...' ),
|
||||
'installed' => __( 'Installed!' ),
|
||||
'installFailed' => __( 'Installation failed' ),
|
||||
'updatingMsg' => __( 'Updating... please wait.' ),
|
||||
'installingMsg' => __( 'Installing... please wait.' ),
|
||||
'updatedMsg' => __( 'Update completed successfully.' ),
|
||||
'installedMsg' => __( 'Installation completed successfully.' ),
|
||||
)
|
||||
) );
|
||||
|
||||
|
|
Loading…
Reference in New Issue