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


git-svn-id: http://core.svn.wordpress.org/trunk@58583 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/edit-rtl.css

@@ -76,6 +76,14 @@
 	pointer-events: none;
 }
 
+#titlewrap .skiplink:focus {
+	clip: inherit;
+	clip-path: inherit;
+	left: 4px;
+	top: 4px;
+	width: auto;
+}
+
 input#link_description,
 input#link_url {
 	width: 100%;
@@ -1039,6 +1047,14 @@ form#tags-filter {
 		white-space: normal;
 		line-height: 1.8;
 	}
+
+	#edit-slug-box {
+		padding: 0;
+	}
+
+	#titlewrap .skiplink:focus {
+		top: 5px;
+	}
 }
 
 @media only screen and (max-width: 1004px) {

wp-admin/css/edit.css

@@ -75,6 +75,14 @@
 	pointer-events: none;
 }
 
+#titlewrap .skiplink:focus {
+	clip: inherit;
+	clip-path: inherit;
+	right: 4px;
+	top: 4px;
+	width: auto;
+}
+
 input#link_description,
 input#link_url {
 	width: 100%;
@@ -1038,6 +1046,14 @@ form#tags-filter {
 		white-space: normal;
 		line-height: 1.8;
 	}
+
+	#edit-slug-box {
+		padding: 0;
+	}
+
+	#titlewrap .skiplink:focus {
+		top: 5px;
+	}
 }
 
 @media only screen and (max-width: 1004px) {

wp-admin/edit-form-advanced.php

@@ -546,6 +546,7 @@ do_action( 'edit_form_top', $post );
 	?>
 	<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
 	/**
@@ -621,18 +622,16 @@ if ( post_type_supports( $post_type, 'editor' ) ) {
 		array(
 			'_content_editor_dfw' => $_content_editor_dfw,
 			'drag_drop_upload'    => true,
-			'tabfocus_elements'   => 'content-html,save-post',
 			'editor_height'       => 300,
 			'tinymce'             => array(
 				'resize'                  => false,
 				'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
 	printf(

wp-admin/js/editor.js

@@ -79,6 +79,8 @@ window.wp = window.wp || {};
 			var editorHeight, toolbarHeight, iframe,
 				editor = tinymce.get( id ),
 				wrap = $$( '#wp-' + id + '-wrap' ),
+				htmlSwitch = wrap.find( '.switch-tmce' ),
+				tmceSwitch = wrap.find( '.switch-html' ),
 				$textarea = $$( '#' + id ),
 				textarea = $textarea[0];
 
@@ -103,18 +105,7 @@ window.wp = window.wp || {};
 
 				editorHeight = parseInt( textarea.style.height, 10 ) || 0;
 
-				var keepSelection = false;
-				if ( editor ) {
-					keepSelection = editor.getParam( 'wp_keep_scroll_position' );
-				} else {
-					keepSelection = window.tinyMCEPreInit.mceInit[ id ] &&
-									window.tinyMCEPreInit.mceInit[ id ].wp_keep_scroll_position;
-				}
-
-				if ( keepSelection ) {
-					// Save the selection.
 				addHTMLBookmarkInTextAreaContent( $textarea );
-				}
 
 				if ( editor ) {
 					editor.show();
@@ -130,15 +121,14 @@ window.wp = window.wp || {};
 						}
 					}
 
-					if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
-						// Restore the selection.
 					focusHTMLBookmarkInVisualEditor( editor );
-					}
 				} else {
 					tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
 				}
 
 				wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
+				tmceSwitch.attr( 'aria-pressed', false );
+				htmlSwitch.attr( 'aria-pressed', true );
 				$textarea.attr( 'aria-hidden', true );
 				window.setUserSetting( 'editor', 'tinymce' );
 
@@ -168,9 +158,7 @@ window.wp = window.wp || {};
 
 					var selectionRange = null;
 
-					if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
 					selectionRange = findBookmarkedPosition( editor );
-					}
 
 					editor.hide();
 
@@ -184,6 +172,8 @@ window.wp = window.wp || {};
 				}
 
 				wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
+				tmceSwitch.attr( 'aria-pressed', true );
+				htmlSwitch.attr( 'aria-pressed', false );
 				$textarea.attr( 'aria-hidden', false );
 				window.setUserSetting( 'editor', 'html' );
 			}
@@ -520,7 +510,7 @@ window.wp = window.wp || {};
 		 * Focuses the selection markers in Visual mode.
 		 *
 		 * The method checks for existing selection markers inside the editor DOM (Visual mode)
-		 * and create a selection between the two nodes using the DOM `createRange` selection API
+		 * and create a selection between the two nodes using the DOM `createRange` selection API.
 		 *
 		 * If there is only a single node, select only the single node through TinyMCE's selection API
 		 *
@@ -545,9 +535,7 @@ window.wp = window.wp || {};
 				}
 			}
 
-			if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
 			scrollVisualModeToStartElement( editor, startNode );
-			}
 
 			removeSelectionMarker( startNode );
 			removeSelectionMarker( endNode );

wp-admin/js/post.js

@@ -434,25 +434,6 @@ jQuery( function($) {
 		$previewField.val('');
 	});
 
-	// This code is meant to allow tabbing from Title to Post content.
-	$('#title').on( 'keydown.editor-focus', function( event ) {
-		var editor;
-
-		if ( event.keyCode === 9 && ! event.ctrlKey && ! event.altKey && ! event.shiftKey ) {
-			editor = typeof tinymce != 'undefined' && tinymce.get('content');
-
-			if ( editor && ! editor.isHidden() ) {
-				editor.focus();
-			} else if ( $textarea.length ) {
-				$textarea.trigger( 'focus' );
-			} else {
-				return;
-			}
-
-			event.preventDefault();
-		}
-	});
-
 	// Auto save new posts after a title is typed.
 	if ( $( '#auto_draft' ).val() ) {
 		$( '#title' ).on( 'blur', function() {

wp-includes/class-wp-editor.php

@@ -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 ),
 		);
 

wp-includes/css/editor-rtl.css

@@ -1141,12 +1141,6 @@ i.mce-i-wp_code:before {
 	color: #1d2327;
 }
 
-.wp-switch-editor:active,
-.html-active .switch-html:focus,
-.tmce-active .switch-tmce:focus {
-	box-shadow: none;
-}
-
 .wp-switch-editor:active {
 	background-color: #f6f7f7;
 	box-shadow: none;

wp-includes/css/editor.css

@@ -1140,12 +1140,6 @@ i.mce-i-wp_code:before {
 	color: #1d2327;
 }
 
-.wp-switch-editor:active,
-.html-active .switch-html:focus,
-.tmce-active .switch-tmce:focus {
-	box-shadow: none;
-}
-
 .wp-switch-editor:active {
 	background-color: #f6f7f7;
 	box-shadow: none;

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.7-beta1-59187';
+$wp_version = '6.7-beta1-59188';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.