WordPress.org

Make WordPress Core

Changeset 30757


Ignore:
Timestamp:
12/06/2014 11:52:25 PM (7 years ago)
Author:
azaozz
Message:

TinyMCE, improve accessibility:

  • Return focus to the editor on pressing Escape while the image toolbar is focused.
  • Add a Close button to the Help modal and close it on Escape.
  • Override the title on the editor iframe (read by screen reader apps), replace with the Alt+Shift+H shortcut.
  • Add focus shortcuts descriptions to the Help modal.

Fixes #27642.

Location:
trunk/src/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-editor.php

    r30733 r30757  
    978978            'Words: {0}' => sprintf( __( 'Words: %s' ), '{0}' ),
    979979            'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.' => __( 'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.' ) . "\n\n" . __( 'If you’re looking to paste rich content from Microsoft Word, try turning this option off. The editor will clean up text pasted from Word automatically.' ),
    980             'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help' => __( 'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help' ),
     980            'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help' => __( 'Rich Text Area. Press Alt-Shift-H for help' ),
    981981            'You have unsaved changes are you sure you want to navigate away?' => __( 'The changes you made will be lost if you navigate away from this page.' ),
    982982            'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.' => __( 'Your browser does not support direct access to the clipboard. Please use keyboard shortcuts or your browser’s edit menu instead.' ),
  • trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

    r30338 r30757  
    194194            width: 450,
    195195            height: 420,
    196             inline: 1,
    197             classes: 'wp-help'
     196            classes: 'wp-help',
     197            buttons: { text: 'Close', onclick: 'close' }
    198198        });
    199199    });
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r30748 r30757  
    303303    } );
    304304
     305    function hide() {
     306        if ( ! toolbarIsHidden ) {
     307            floatingToolbar.hide();
     308        }
     309    }
     310
    305311    floatingToolbar.on( 'show', function() {
    306312        var self = this;
     
    321327    } );
    322328
    323     function hide() {
    324         if ( ! toolbarIsHidden ) {
    325             floatingToolbar.hide();
    326         }
    327     }
     329    floatingToolbar.on( 'keydown', function( event ) {
     330        if ( event.keyCode === 27 ) {
     331            hide();
     332        }
     333    } );
    328334
    329335    DOM.bind( window, 'resize scroll', function() {
  • trunk/src/wp-includes/js/tinymce/wp-mce-help.php

    r30584 r30757  
    104104        <tr><th>2</th><td><?php _e('Heading 2'); ?></td><th>3</th><td><?php _e('Heading 3'); ?></td></tr>
    105105        <tr><th>4</th><td><?php _e('Heading 4'); ?></td><th>5</th><td><?php _e('Heading 5'); ?></td></tr>
    106         <tr><th>6</th><td><?php _e('Heading 6'); ?></td><th>9</th><td><?php _e('Address'); ?></td></tr>
    107         <tr><th>k</th><td><?php _e('Insert/edit link'); ?></td><th> </th><td>&nbsp;</td></tr>
     106        <tr><th>6</th><td><?php _e('Heading 6'); ?></td><th>k</th><td><?php _e('Insert/edit link'); ?></td></tr>
    108107    </table>
    109108
     
    121120        <tr><th>x</th><td><?php _e('Add/remove code tag'); ?></td><th> </th><td>&nbsp;</td></tr>
    122121    </table>
     122
     123    <p><?php _e('Focus shortcuts:'); ?></p>
     124
     125    <table class="keys focus">
     126        <tr><th class="left">Alt + F8</th><td><?php _e('Image toolbar (when an image is selected)'); ?></td></tr>
     127        <tr><th class="left">Alt + F9</th><td><?php _e('Editor menu (when enabled)'); ?></td></tr>
     128        <tr><th class="left">Alt + F10</th><td><?php _e('Editor toolbar'); ?></td></tr>
     129        <tr><th class="left">Alt + F11</th><td><?php _e('Elements path'); ?></td></tr>
     130    </table>
     131
     132    <p><?php _e('To move focus to other buttons use Tab or the arrow keys. To return focus to the editor press Escape or use one of the buttons.'); ?></p>
    123133</div>
    124134
Note: See TracChangeset for help on using the changeset viewer.