HostForge-Systems/wordpress
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
Built from https://develop.svn.wordpress.org/trunk@59188


git-svn-id: http://core.svn.wordpress.org/trunk@58583 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson
2024-10-07 16:57:16 +00:00
parent 42db398596
commit 12cf82f950
15 changed files with 56 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
wp-includes/class-wp-editor.php
View File

@@ -188,10 +188,12 @@ final class _WP_Editors {
if ( 'html' !== $default_editor ) {
$default_editor = 'tinymce';
}
$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" class="wp-switch-editor switch-tmce"' .
$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 {
$default_editor = 'tinymce';
@@ -1113,7 +1115,6 @@ final class _WP_Editors {
'end_container_on_empty_block' => true,
'wpeditimage_html5_captions' => true,
'wp_lang_attr' => get_bloginfo( 'language' ),
'wp_keep_scroll_position' => false,
'wp_shortcut_labels' => wp_json_encode( $shortcut_labels ),
);