Changeset 59188 for trunk/src/wp-admin/edit-form-advanced.php

Timestamp:

10/07/2024 04:55:26 PM (2 years ago)

Author:

joedolson

Message:

Editor: A11y: Fix tab order, state, and focus in classic editor.

Remove code that forced focus to skip from the title field to the editor. Add link to skip to editor to give the user control over their path. Set aria-pressed on editor selector buttons to communicate which editor is enabled. Make focus state visible on unselected editor button. Remove wp_keep_scroll_position flag used for IE compatibility. Add role="presentation" to table used as status info bar.

This addresses a long-standing accessibility problem in the classic editor which created a confusing keyboard navigation path by skipping all content between the title field and the content editor.

Props afercia, rcreators, benjamin_zekavica, sharonaustin, joedolson.
Fixes #29838.

File:

• trunk/src/wp-admin/edit-form-advanced.php (modified) (3 diffs)

trunk/src/wp-admin/edit-form-advanced.php

@@ -547 +547 @@
         <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo $title_placeholder; ?></label>
         <input type="text" name="post_title" size="30" value="<?php echo esc_attr( $post->post_title ); ?>" id="title" spellcheck="true" autocomplete="off" />
+        <a href="#content" class="button-secondary screen-reader-text skiplink" onclick="if (tinymce) { tinymce.execCommand( 'mceFocus', false, 'content' ); }"><?php esc_html_e( 'Skip to Editor' ); ?></a>
 </div>
         <?php
@@ -622 +623 @@
                         '_content_editor_dfw' => $_content_editor_dfw,
                         'drag_drop_upload'    => true,
-                        'tabfocus_elements'   => 'content-html,save-post',
                         'editor_height'       => 300,
                         'tinymce'             => array(
@@ -628 +628 @@
                                 'wp_autoresize_on'        => $_wp_editor_expand,
                                 'add_unload_trigger'      => false,
-                                'wp_keep_scroll_position' => ! $is_IE,
                         ),
                 )
         );
         ?>
-<table id="post-status-info"><tbody><tr>
+<table id="post-status-info" role="presentation"><tbody><tr>
         <td id="wp-word-count" class="hide-if-no-js">
         <?php