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:
Andrew Ozz 2015-03-01 19:10:58 +00:00
parent 753b3c6d38
commit 0778a17875
5 changed files with 61 additions and 6 deletions

View File

@ -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 &amp; Publish' ) : __( 'Save &amp; Activate' );

View File

@ -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

View File

@ -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 );
};
/**

View File

@ -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 );

View File

@ -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.' ),
)
) );