Changeset 59188 for trunk/src/wp-includes/class-wp-editor.php

Timestamp:

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

• trunk/src/wp-includes/class-wp-editor.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-editor.php

@@ -189 +189 @@
                     $default_editor = 'tinymce';
                 }
-
-                $buttons .= '<button type="button" id="' . $editor_id_attr . '-tmce" class="wp-switch-editor switch-tmce"' .
+                $tmce_active = ( 'html' === $default_editor ) ? ' aria-pressed="true"' : '';
+                $html_active = ( 'html' === $default_editor ) ? '' : ' aria-pressed="true"';
+
+                $buttons .= '<button type="button" id="' . $editor_id_attr . '-tmce"' . $html_active . ' class="wp-switch-editor switch-tmce"' .
                     ' data-wp-editor-id="' . $editor_id_attr . '">' . _x( 'Visual', 'Name for the Visual editor tab' ) . "</button>\n";
-                $buttons .= '<button type="button" id="' . $editor_id_attr . '-html" class="wp-switch-editor switch-html"' .
+                $buttons .= '<button type="button" id="' . $editor_id_attr . '-html"' . $tmce_active . ' class="wp-switch-editor switch-html"' .
                     ' data-wp-editor-id="' . $editor_id_attr . '">' . _x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) . "</button>\n";
             } else {
@@ -1114 +1116 @@
             'wpeditimage_html5_captions'   => true,
             'wp_lang_attr'                 => get_bloginfo( 'language' ),
-            'wp_keep_scroll_position'      => false,
             'wp_shortcut_labels'           => wp_json_encode( $shortcut_labels ),
         );