WordPress.org
Get WordPress

Make WordPress Core

Ticket #31368: web-speech-api-demo.patch

File web-speech-api-demo.patch, 10.0 KB (added by afercia, 11 years ago)

Web Speech API, just for demoing purposes

  • src/wp-admin/admin-header.php

     
    189189}
    190190?>
    191191
     192<div id="wp-speak" aria-live="polite" aria-relevant="all" aria-role="status" aria-atomic="true" class="screen-reader-text"></div>
     193
    192194<div id="wpwrap">
    193195<a tabindex="1" href="#wpbody-content" class="screen-reader-shortcut"><?php _e('Skip to main content'); ?></a>
    194196<?php require(ABSPATH . 'wp-admin/menu-header.php'); ?>

  • src/wp-admin/admin.php

     
    9393$time_format = get_option('time_format');
    9494
    9595wp_enqueue_script( 'common' );
     96wp_enqueue_script( 'a11y' );
    9697
    9798// $pagenow is set in vars.php
    9899// $wp_importers is sometimes set in wp-admin/includes/import.php

  • src/wp-admin/customize.php

     
    118118<body class="<?php echo esc_attr( $body_class ); ?>">
    119119<div class="wp-full-overlay expanded">
    120120        <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
    121                 <div id="screen-reader-messages" aria-live="polite" aria-relevant="all" aria-role="status" aria-atomic="true" class="screen-reader-text"></div>
     121                <div id="wp-speak" aria-live="polite" aria-relevant="all" aria-role="status" aria-atomic="true" class="screen-reader-text"></div>
    122122
    123123                <div id="customize-header-actions" class="wp-full-overlay-header">
    124124                        <?php

  • src/wp-admin/js/customize-widgets.js

     
    685685
    686686                                        if ( isMoveUp ) {
    687687                                                self.moveUp();
    688                                                 $( '#screen-reader-messages' ).text( l10n.widgetMovedUp );
     688                                                wp.speak( l10n.widgetMovedUp );
     689                                                wp.webSpeech( l10n.widgetMovedUp, 0 );
    689690                                        } else {
    690691                                                self.moveDown();
    691                                                 $( '#screen-reader-messages' ).text( l10n.widgetMovedDown );
     692                                                wp.speak( l10n.widgetMovedDown );
     693                                                wp.webSpeech( l10n.widgetMovedDown, 1 );
    692694                                        }
    693695
    694696                                        $( this ).focus(); // re-focus after the container was moved
    … …  
    19871989                return settingId;
    19881990        }
    19891991
     1992        wp.a11y.debug = true;
     1993        wp.a11y.enableWebSpeech = true;
     1994
    19901995})( window.wp, jQuery );

  • src/wp-admin/js/updates.js

     
    107107
    108108                $message.addClass( 'updating-message' );
    109109                $message.text( wp.updates.l10n.updating );
     110                wp.speak( wp.updates.l10n.updatingMsg );
     111                wp.webSpeech( wp.updates.l10n.updatingMsg );
    110112
    111113                if ( wp.updates.updateLock ) {
    112114                        wp.updates.updateQueue.push( {
    … …  
    153155
    154156                $message.removeClass( 'updating-message' ).addClass( 'updated-message' );
    155157                $message.text( wp.updates.l10n.updated );
     158                wp.speak( wp.updates.l10n.updatedMsg );
     159                wp.webSpeech( wp.updates.l10n.updatedMsg, 'Google UK English Male' );
    156160
    157161                wp.updates.decrementCount( 'plugin' );
    158162        };
    … …  
    173177                }
    174178                $message.removeClass( 'updating-message' );
    175179                $message.text( wp.updates.l10n.updateFailed );
     180                wp.speak( wp.updates.l10n.updateFailed );
     181                wp.webSpeech( wp.updates.l10n.updateFailed, 4 );
    176182        };
    177183
    178184        /**
    … …  
    198204
    199205                $message.addClass( 'updating-message' );
    200206                $message.text( wp.updates.l10n.installing );
     207                wp.speak( wp.updates.l10n.installingMsg );
     208                wp.webSpeech( wp.updates.l10n.installingMsg, 2 );
    201209
    202210                if ( wp.updates.updateLock ) {
    203211                        wp.updates.updateQueue.push( {
    … …  
    234242
    235243                $message.removeClass( 'updating-message' ).addClass( 'updated-message button-disabled' );
    236244                $message.text( wp.updates.l10n.installed );
     245                wp.speak( wp.updates.l10n.installedMsg );
     246                wp.webSpeech( wp.updates.l10n.installedMsg, 3 );
    237247        };
    238248
    239249        /**
    … …  
    316326                        }
    317327                        wp.updates.installPlugin( $button.data( 'slug' ) );
    318328                } );
     329
     330                wp.a11y.debug = true;
     331                wp.a11y.enableWebSpeech = true;
    319332        } );
    320333
    321334        $( window ).on( 'message', function( e ) {

  • src/wp-includes/js/wp-a11y.js

     
     1window.wp = window.wp || {};
     2
     3( function ( wp, $ ) {
     4        'use strict';
     5
     6        var a11y;
     7
     8        a11y = wp.a11y = wp.a11y || {};
     9
     10        /**
     11         * Flag to enable debug mode.
     12         * Set this to true in your script on document.ready to have messages
     13         * printed out in your browser's console.
     14         *
     15         * @since 4.2.0
     16         *
     17         * @var bool
     18         */
     19        a11y.debug = false;
     20
     21        /**
     22         * Flag to enable Web Speech API experimental support.
     23         *
     24         * @since 4.2.0
     25         *
     26         * @var bool
     27         */
     28        a11y.enableWebSpeech = false;
     29
     30        /**
     31         * wp.a11y.log
     32         *
     33         * A debugging utility. Works only when the debug flag is on and the browser
     34         * supports it.
     35         *
     36         * @since 4.2.0
     37         */
     38        a11y.log = function() {
     39                if ( window.console && a11y.debug ) {
     40                        window.console.log.apply( window.console, arguments );
     41                }
     42        };
     43
     44        /**
     45         * wp.a11y.speak
     46         *
     47         * Update the ARIA live notification area text node.
     48         *
     49         * @since 4.2.0
     50         *
     51         * @param {string} message
     52         */
     53        a11y.speak = function( message ) {
     54
     55                if ( 0 === a11y.liveContainer.length ) {
     56                        // No need to make this translatable, it's just for debugging.
     57                        a11y.log( 'WP speak can\'t speak: no live notification area present' );
     58                        return;
     59                }
     60
     61                // Log messages to the console when debugging.
     62                a11y.log( 'WP speak: ' + message );
     63
     64                // Make messages available to screen readers.
     65                a11y.liveContainer.text( message );
     66
     67        };
     68
     69        /**
     70         * wp.a11y.setWebSpeechVoices
     71         *
     72         * Set up voices for the Web Speech API if enabled and the browser supports it.
     73         *
     74         * @since 4.2.0
     75         */
     76        a11y.setWebSpeechVoices = function() {
     77
     78                var logged = false;
     79
     80                if ( 'speechSynthesis' in window && a11y.enableWebSpeech ) {
     81                        // Voices are loaded on demand, asynchronously, the first time you call getVoices.
     82                        // When they load, an onvoiceschanged event is fired.
     83                        window.speechSynthesis.onvoiceschanged = function() {
     84                                a11y.voices = window.speechSynthesis.getVoices();
     85                                // Log in the console the available Web Speech API voices when debugging.
     86                                if ( a11y.debug && ! logged ) {
     87                                        a11y.voices.forEach( function( voice ) {
     88                                                window.console.log( voice.name, voice['default'] ? '(browser default)' : '' );
     89                                        });
     90                                        // Log them just once.
     91                                        logged = true;
     92                                }
     93                        };
     94                }
     95        };
     96
     97        /**
     98         * wp.a11y.webSpeech
     99         *
     100         * Deliver messages to the Web Speech API if enabled and the browser supports it.
     101         *
     102         * @since 4.2.0
     103         *
     104         * @param {string} message
     105         * @param {number|string} setVoice voice array index or voice name
     106         */
     107        a11y.webSpeech = function( message, setVoice ) {
     108
     109                var utterance;
     110
     111                if ( 'speechSynthesis' in window && a11y.enableWebSpeech ) {
     112                        utterance = new window.SpeechSynthesisUtterance( message );
     113                        // Switch voice.
     114                        if ( setVoice && 'number' === typeof( setVoice ) ) {
     115                                utterance.voice = a11y.voices[ setVoice ];
     116                        } else if ( setVoice && 'string' === typeof( setVoice ) ) {
     117                                utterance.voice = a11y.voices.filter( function( voice ) {
     118                                        return voice.name == setVoice;
     119                                })[0];
     120                        } else {
     121                                utterance.voice = a11y.voices[0];
     122                        }
     123                        window.speechSynthesis.speak( utterance );
     124                }
     125        };
     126
     127        /**
     128         * Give developers an easy, handy, shortcut to send messages to screen readers.
     129         *
     130         * Usage: wp.speak( 'your text string here' );
     131         *
     132         * @since 4.2.0
     133         */
     134        wp.speak = a11y.speak;
     135
     136        /**
     137         * Web Speech API shortcut
     138         *
     139         * Usage: wp.webSpeech( 'your text string here' );
     140         *
     141         * @since 4.2.0
     142         */
     143        wp.webSpeech = a11y.webSpeech;
     144
     145        /**
     146         * Initialize wp.a11y and define ARIA live notification area.
     147         *
     148         * @since 4.2.0
     149         */
     150        a11y.init = function() {
     151                a11y.liveContainer = $( '#wp-speak' );
     152                a11y.setWebSpeechVoices();
     153        };
     154
     155        $( document ).ready( a11y.init );
     156
     157} ( window.wp, jQuery ) );

  • src/wp-includes/script-loader.php

     
    8282                'warnDelete' => __("You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete.")
    8383        ) );
    8484
     85        $scripts->add( 'a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );
     86
    8587        $scripts->add( 'sack', "/wp-includes/js/tw-sack$suffix.js", array(), '1.6.1', 1 );
    8688
    8789        $scripts->add( 'quicktags', "/wp-includes/js/quicktags$suffix.js", array(), false, 1 );
    … …  
    379381
    380382        $scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r7', 1 );
    381383
    382         $scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery', 'json2', 'underscore' ), false, 1 );
     384        $scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery', 'json2', 'underscore', 'a11y' ), false, 1 );
    383385        $scripts->add( 'customize-loader',   "/wp-includes/js/customize-loader$suffix.js",   array( 'customize-base' ), false, 1 );
    384386        $scripts->add( 'customize-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
    385387        $scripts->add( 'customize-models',   "/wp-includes/js/customize-models.js", array( 'underscore', 'backbone' ), false, 1 );
    … …  
    511513                                'installing'    => __( 'Installing...' ),
    512514                                'installed'     => __( 'Installed!' ),
    513515                                'installFailed' => __( 'Installation failed' ),
     516                                'updatingMsg'   => __( 'Updating... please wait.' ),
     517                                'installingMsg' => __( 'Installing... please wait.' ),
     518                                'updatedMsg'    => __( 'Update completed successfully.' ),
     519                                'installedMsg'  => __( 'Installation completed successfully.' ),
    514520                        )
    515521                ) );
    516522