Context Navigation

← Previous Change
Next Change →

edit-form-advanced.php

Timestamp:

10/07/2024 04:55:26 PM (21 months 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:

: 1 edited

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

Legend:

: Unmodified
: Added
: Removed

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

-              r59161
+              r59188
         <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
 …
                         '_content_editor_dfw' => $_content_editor_dfw,
                         'drag_drop_upload'    => true,
-                        'tabfocus_elements'   => 'content-html,save-post',
                         'editor_height'       => 300,
                         'tinymce'             => array(
 …
                                 '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

Note: See TracChangeset for help on using the changeset viewer.

Make WordPress Core

Context Navigation

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

Legend:

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

Download in other formats: