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.

git-svn-id: https://develop.svn.wordpress.org/trunk@59188 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/js/_enqueues/admin/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() {

src/js/_enqueues/wp/editor/base.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 );
-				}
+				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 );
-					}
+					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 );
-					}
+					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 );
-			}
+			scrollVisualModeToStartElement( editor, startNode );
 
 			removeSelectionMarker( startNode );
 			removeSelectionMarker( endNode );

src/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) {

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

@@ -546,6 +546,7 @@
 	?>
 	<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 @@
 		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(

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

@@ -188,10 +188,12 @@ public static function editor( $content, $editor_id, $settings = array() ) {
 				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 @@ private static function default_settings() {
 			'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 ),
 		);
 

src/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;