Accessibility: CodeMirror editing areas minor improvements.

- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled
- adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea
- standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability
- use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors
- fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle
- moves focus to the CodeMirror editing area when clicking on the associated label
- in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen
- also, removes a few textdomain leftovers, see `better-code-editing` and `default`

Props westonruter, melchoyce, afercia.
Fixes #41872.

Built from https://develop.svn.wordpress.org/trunk@41586


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

wp-admin/css/common-rtl.css

@@ -3035,6 +3035,12 @@ img {
 	height: calc( 100vh - 220px );
 }
 
+#template label {
+	display: inline-block;
+	margin-bottom: 1em;
+	font-weight: 600;
+}
+
 /* rtl:ignore */
 #template textarea,
 #docs-list {

wp-admin/css/common.css

@@ -3035,6 +3035,12 @@ img {
 	height: calc( 100vh - 220px );
 }
 
+#template label {
+	display: inline-block;
+	margin-bottom: 1em;
+	font-weight: 600;
+}
+
 /* rtl:ignore */
 #template textarea,
 #docs-list {

wp-admin/css/customize-controls-rtl.css

@@ -550,12 +550,15 @@ p.customize-section-description {
 	margin-top: 22px;
 	margin-bottom: 0;
 }
+
 .customize-section-description ul {
 	margin-right: 1em;
 }
+
 .customize-section-description ul > li {
 	list-style: disc;
 }
+
 .section-description-buttons {
 	text-align: left;
 }
@@ -1197,12 +1200,17 @@ p.customize-section-description {
 	height: 500px;
 }
 
+.customize-section-description-container + #customize-control-custom_css .customize-control-title {
+	margin-right: 12px;
+}
+
 .customize-section-description-container + #customize-control-custom_css:last-child textarea {
 	border-left: 0;
 	border-right: 0;
 	height: calc( 100vh - 185px );
 	resize: none;
 }
+
 .customize-section-description-container + #customize-control-custom_css:last-child {
 	margin-right: -12px;
 	width: 299px;
@@ -1213,6 +1221,7 @@ p.customize-section-description {
 .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
 	height: calc( 100vh - 185px );
 }
+
 .CodeMirror-lint-tooltip,
 .CodeMirror-hints {
 	z-index: 500000 !important;
@@ -1227,6 +1236,7 @@ p.customize-section-description {
 	.customize-section-description-container + #customize-control-custom_css:last-child {
 		margin-left: 0;
 	}
+
 	.customize-section-description-container + #customize-control-custom_css:last-child textarea {
 		height: calc( 100vh - 140px );
 	}

wp-admin/css/customize-controls.css

@@ -550,12 +550,15 @@ p.customize-section-description {
 	margin-top: 22px;
 	margin-bottom: 0;
 }
+
 .customize-section-description ul {
 	margin-left: 1em;
 }
+
 .customize-section-description ul > li {
 	list-style: disc;
 }
+
 .section-description-buttons {
 	text-align: right;
 }
@@ -1197,12 +1200,17 @@ p.customize-section-description {
 	height: 500px;
 }
 
+.customize-section-description-container + #customize-control-custom_css .customize-control-title {
+	margin-left: 12px;
+}
+
 .customize-section-description-container + #customize-control-custom_css:last-child textarea {
 	border-right: 0;
 	border-left: 0;
 	height: calc( 100vh - 185px );
 	resize: none;
 }
+
 .customize-section-description-container + #customize-control-custom_css:last-child {
 	margin-left: -12px;
 	width: 299px;
@@ -1213,6 +1221,7 @@ p.customize-section-description {
 .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
 	height: calc( 100vh - 185px );
 }
+
 .CodeMirror-lint-tooltip,
 .CodeMirror-hints {
 	z-index: 500000 !important;
@@ -1227,6 +1236,7 @@ p.customize-section-description {
 	.customize-section-description-container + #customize-control-custom_css:last-child {
 		margin-right: 0;
 	}
+
 	.customize-section-description-container + #customize-control-custom_css:last-child textarea {
 		height: calc( 100vh - 140px );
 	}

wp-admin/js/customize-controls.js

@@ -1176,7 +1176,7 @@
 				content = meta.find( '.customize-section-description:first' );
 				content.toggleClass( 'open' );
 				content.slideToggle();
-				content.attr( 'aria-expanded', function ( i, attr ) {
+				$( this ).attr( 'aria-expanded', function( i, attr ) {
 					return 'true' === attr ? 'false' : 'true';
 				});
 			});
@@ -1888,12 +1888,7 @@
 
 			meta = panel.container.find( '.panel-meta:first' );
 
-			meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
+			meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
-				if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-					return;
-				}
-				event.preventDefault(); // Keep this AFTER the key filter above
-
 				if ( meta.hasClass( 'cannot-expand' ) ) {
 					return;
 				}
@@ -3781,6 +3776,20 @@
 
 			control.editor = wp.codeEditor.initialize( $textarea, settings );
 
+			// Improve the editor accessibility.
+			$( control.editor.codemirror.display.lineDiv )
+				.attr({
+					role: 'textbox',
+					'aria-multiline': 'true',
+					'aria-label': control.params.label,
+					'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+				});
+
+			// Focus the editor when clicking on its label.
+			control.container.find( 'label' ).on( 'click', function() {
+				control.editor.codemirror.focus();
+			});
+
 			/*
 			 * When the CodeMirror instance changes, mirror to the textarea,
 			 * where we have our "true" change event handler bound.
@@ -5968,7 +5977,7 @@
 				});
 			});
 
-			// Set up the section desription behaviors.
+			// Set up the section description behaviors.
 			sectionReady.done( function setupSectionDescription( section ) {
 				var control = api.control( 'custom_css' );
 
@@ -5976,16 +5985,20 @@
 				section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
 					section.container.find( '.section-meta .customize-section-description:first' )
 						.removeClass( 'open' )
-						.slideUp()
+						.slideUp();
-						.attr( 'aria-expanded', 'false' );
+
+					section.container.find( '.customize-help-toggle' )
+						.attr( 'aria-expanded', 'false' )
+						.focus(); // Avoid focus loss.
 				});
 
 				// Reveal help text if setting is empty.
 				if ( control && ! control.setting.get() ) {
 					section.container.find( '.section-meta .customize-section-description:first' )
 						.addClass( 'open' )
-						.show()
+						.show();
-						.attr( 'aria-expanded', 'true' );
+
+					section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );
 				}
 			});
 		})();

wp-admin/js/theme-plugin-editor.js

@@ -83,6 +83,20 @@ wp.themePluginEditor = (function( $ ) {
 
 		editor = wp.codeEditor.initialize( $( '#newcontent' ), codeEditorSettings );
 
+		// Improve the editor accessibility.
+		$( editor.codemirror.display.lineDiv )
+			.attr({
+				role: 'textbox',
+				'aria-multiline': 'true',
+				'aria-labelledby': 'theme-plugin-editor-label',
+				'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+			});
+
+		// Focus the editor when clicking on its label.
+		$( '#theme-plugin-editor-label' ).on( 'click', function() {
+			editor.codemirror.focus();
+		});
+
 		component.instance = editor;
 	};
 

wp-admin/js/theme-plugin-editor.min.js

@@ -1 +1 @@
-window.wp||(window.wp={}),wp.themePluginEditor=function(a){"use strict";var b={l10n:{lintError:{singular:"",plural:""}},instance:null};return b.init=function(c){var d,e,f,g=[];d=a.extend({},c),d.onTabPrevious=function(){a("#templateside").find(":tabbable").last().focus()},d.onTabNext=function(){a("#template").find(":tabbable:not(.CodeMirror-code)").first().focus()},e=a('<div id="file-editor-linting-error"></div>'),g=a('<div class="inline notice notice-error"></div>'),e.append(g),e.hide(),a("p.submit").before(e),d.onUpdateErrorNotice=function(c){var d;a("#submit").prop("disabled",0!==c.length),0!==c.length?(g.empty(),d=1===c.length?b.l10n.singular.replace("%d","1"):b.l10n.plural.replace("%d",String(c.length)),g.append(a("<p></p>",{text:d})),e.slideDown("fast"),wp.a11y.speak(d)):e.slideUp("fast")},f=wp.codeEditor.initialize(a("#newcontent"),d),b.instance=f},b}(jQuery);
+window.wp||(window.wp={}),wp.themePluginEditor=function(a){"use strict";var b={l10n:{lintError:{singular:"",plural:""}},instance:null};return b.init=function(c){var d,e,f,g=[];d=a.extend({},c),d.onTabPrevious=function(){a("#templateside").find(":tabbable").last().focus()},d.onTabNext=function(){a("#template").find(":tabbable:not(.CodeMirror-code)").first().focus()},e=a('<div id="file-editor-linting-error"></div>'),g=a('<div class="inline notice notice-error"></div>'),e.append(g),e.hide(),a("p.submit").before(e),d.onUpdateErrorNotice=function(c){var d;a("#submit").prop("disabled",0!==c.length),0!==c.length?(g.empty(),d=1===c.length?b.l10n.singular.replace("%d","1"):b.l10n.plural.replace("%d",String(c.length)),g.append(a("<p></p>",{text:d})),e.slideDown("fast"),wp.a11y.speak(d)):e.slideUp("fast")},f=wp.codeEditor.initialize(a("#newcontent"),d),a(f.codemirror.display.lineDiv).attr({role:"textbox","aria-multiline":"true","aria-labelledby":"theme-plugin-editor-label","aria-describedby":"editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"}),a("#theme-plugin-editor-label").on("click",function(){f.codemirror.focus()}),b.instance=f},b}(jQuery);

wp-admin/js/widgets/custom-html-widgets.js

@@ -210,6 +210,21 @@ wp.customHtmlWidgets = ( function( $ ) {
 			});
 
 			control.editor = wp.codeEditor.initialize( control.fields.content, settings );
+
+			// Improve the editor accessibility.
+			$( control.editor.codemirror.display.lineDiv )
+				.attr({
+					role: 'textbox',
+					'aria-multiline': 'true',
+					'aria-labelledby': control.fields.content[0].id + '-label',
+					'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+				});
+
+			// Focus the editor when clicking on its label.
+			$( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() {
+				control.editor.codemirror.focus();
+			});
+
 			control.fields.content.on( 'change', function() {
 				if ( this.value !== control.editor.codemirror.getValue() ) {
 					control.editor.codemirror.setValue( this.value );

wp-admin/plugin-editor.php

@@ -195,7 +195,12 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {
 		'<p>' . __('You can use the editor to make changes to any of your plugins&#8217; individual PHP files. Be aware that if you make changes, plugins updates will overwrite your customizations.') . '</p>' .
 		'<p>' . __('Choose a plugin to edit from the dropdown menu and click the Select button. Click once on any file name to load it in the editor, and make your changes. Don&#8217;t forget to save your changes (Update File) when you&#8217;re finished.') . '</p>' .
 		'<p>' . __('The Documentation menu below the editor lists the PHP functions recognized in the plugin file. Clicking Look Up takes you to a web page about that particular function.') . '</p>' .
-		'<p id="newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>' .
+		'<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
+		'<ul>' .
+		'<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
+		'<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
+		'<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
+		'</ul>' .
 		'<p>' . __('If you want to make changes but don&#8217;t want them to be overwritten when the plugin is updated, you may be ready to think about writing your own plugin. For information on how to edit plugins, write your own from scratch, or just better understand their anatomy, check out the links below.') . '</p>' .
 		( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
 	) );
@@ -255,7 +260,8 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {
 
 <div class="fileedit-sub">
 <div class="alignleft">
-<big><?php
+<h2>
+	<?php
 	if ( is_plugin_active( $plugin ) ) {
 		if ( is_writeable( $real_file ) ) {
 			/* translators: %s: plugin file name */
@@ -273,7 +279,8 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {
 			echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . esc_html( $file ) . '</strong>' );
 		}
 	}
-	?></big>
+	?>
+</h2>
 </div>
 <div class="alignright">
 	<form action="plugin-editor.php" method="post">
@@ -321,11 +328,13 @@ foreach ( $plugin_files as $plugin_file ) :
 </div>
 <form name="template" id="template" action="plugin-editor.php" method="post">
 	<?php wp_nonce_field('edit-plugin_' . $file) ?>
-		<div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
+		<div>
+			<label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
+			<textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"><?php echo $content; ?></textarea>
 			<input type="hidden" name="action" value="update" />
-		<input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
+			<input type="hidden" name="file" value="<?php echo esc_attr( $file ); ?>" />
-		<input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
+			<input type="hidden" name="plugin" value="<?php echo esc_attr( $plugin ); ?>" />
-		<input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
+			<input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
 		</div>
 		<?php if ( !empty( $docs_select ) ) : ?>
 		<div id="documentation" class="hide-if-no-js"><label for="docs-list"><?php _e('Documentation:') ?></label> <?php echo $docs_select ?> <input type="button" class="button" value="<?php esc_attr_e( 'Look Up' ) ?> " onclick="if ( '' != jQuery('#docs-list').val() ) { window.open( 'https://api.wordpress.org/core/handbook/1.0/?function=' + escape( jQuery( '#docs-list' ).val() ) + '&amp;locale=<?php echo urlencode( get_user_locale() ) ?>&amp;version=<?php echo urlencode( get_bloginfo( 'version' ) ) ?>&amp;redirect=true'); }" /></div>

wp-admin/theme-editor.php

@@ -24,14 +24,20 @@ get_current_screen()->add_help_tab( array(
 'id'		=> 'overview',
 'title'		=> __('Overview'),
 'content'	=>
-	'<p>' . __('You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.') . '</p>
+	'<p>' . __( 'You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.' ) . '</p>' .
-	<p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme&#8217;s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p>
+	'<p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme&#8217;s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p>' .
-	<p>' . __('For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.') . '</p>
+	'<p>' . __( 'For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.' ) . '</p>' .
-	<p id="newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>
+	'<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
-	<p>' . __('After typing in your edits, click Update File.') . '</p>
+	'<ul>' .
-	<p>' . __('<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.') . '</p>
+	'<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
-	<p>' . sprintf( __('Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.'), __('https://codex.wordpress.org/Child_Themes') ) . '</p>' .
+	'<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
-	( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
+	'<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
+	'</ul>' .
+	'<p>' . __( 'After typing in your edits, click Update File.' ) . '</p>' .
+	'<p>' . __( '<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.' ) . '</p>' .
+	/* translators: placeholder is link to codex article about child themes */
+	'<p>' . sprintf( __( 'Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.' ), __( 'https://codex.wordpress.org/Child_Themes' ) ) . '</p>' .
+	( is_network_admin() ? '<p>' . __( 'Any edits to files from this screen will be reflected on all sites in the network.' ) . '</p>' : '' ),
 ) );
 
 get_current_screen()->set_help_sidebar(
@@ -294,11 +300,13 @@ if ( $allowed_files ) :
 else : ?>
 	<form name="template" id="template" action="theme-editor.php" method="post">
 	<?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?>
-		<div><textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
+		<div>
+			<label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
+			<textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"><?php echo $content; ?></textarea>
 			<input type="hidden" name="action" value="update" />
 			<input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
 			<input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
-		<input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
+			<input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
 		</div>
 	<?php if ( ! empty( $functions ) ) : ?>
 		<div id="documentation" class="hide-if-no-js">

wp-includes/class-wp-customize-manager.php

@@ -4168,40 +4168,41 @@ final class WP_Customize_Manager {
 
 		/* Custom CSS */
 		$section_description = '<p>';
-		$section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
+		$section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' );
 		$section_description .= sprintf(
 			' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
-			esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
+			esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
-			__( 'Learn more about CSS', 'default' ),
+			__( 'Learn more about CSS' ),
 			/* translators: accessibility text */
-			__( '(opens in a new window)', 'default' )
+			__( '(opens in a new window)' )
 		);
 		$section_description .= '</p>';
 
-		$section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
+		$section_description .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
 		$section_description .= '<ul>';
-		$section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
+		$section_description .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
-		$section_description .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.', 'better-code-editing' ) . '</li>';
+		$section_description .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
+		$section_description .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
 		$section_description .= '</ul>';
 
 		if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
 			$section_description .= '<p>';
 			$section_description .= sprintf(
 				/* translators: placeholder is link to user profile */
-				__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
+				__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
 				sprintf(
 					' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
-					esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
+					esc_url( get_edit_profile_url() ),
-					__( 'user profile', 'better-code-editing' ),
+					__( 'user profile' ),
 					/* translators: accessibility text */
-					__( '(opens in a new window)', 'default' )
+					__( '(opens in a new window)' )
 				)
 			);
 			$section_description .= '</p>';
 		}
 
 		$section_description .= '<p class="section-description-buttons">';
-		$section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
+		$section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close' ) . '</button>';
 		$section_description .= '</p>';
 
 		$this->add_section( 'custom_css', array(
@@ -4218,9 +4219,13 @@ final class WP_Customize_Manager {
 		$this->add_setting( $custom_css_setting );
 
 		$this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
+			'label'       => __( 'CSS code' ),
 			'section'     => 'custom_css',
 			'settings'    => array( 'default' => $custom_css_setting->id ),
 			'code_type'   => 'text/css',
+			'input_attrs' => array(
+				'aria-describedby' => 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4',
+			),
 		) ) );
 	}
 

wp-includes/class-wp-customize-panel.php

@@ -363,7 +363,7 @@ class WP_Customize_Panel {
 					echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
 				?></span>
 				<# if ( data.description ) { #>
-					<button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+					<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
 				<# } #>
 			</div>
 			<# if ( data.description ) { #>

wp-includes/customize/class-wp-customize-code-editor-control.php

@@ -71,6 +71,7 @@ class WP_Customize_Code_Editor_Control extends WP_Customize_Control {
 		$json = parent::json();
 		$json['code_type'] = $this->code_type;
 		$json['editor_settings'] = $this->editor_settings;
+		$json['input_attrs'] = $this->input_attrs;
 		return $json;
 	}
 
@@ -98,7 +99,11 @@ class WP_Customize_Code_Editor_Control extends WP_Customize_Control {
 			<span class="description customize-control-description">{{{ data.description }}}</span>
 		<# } #>
 		<div class="customize-control-notifications-container"></div>
-		<textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
+		<textarea id="{{ elementIdPrefix }}_editor"
+			<# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
+				{{{ key }}}="{{ value }}"
+			<# }); #>
+			></textarea>
 		<?php
 	}
 }

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41585';
+$wp_version = '4.9-alpha-41586';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-includes/widgets/class-wp-widget-custom-html.php

@@ -212,12 +212,12 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 		<script type="text/html" id="tmpl-widget-custom-html-control-fields">
 			<# var elementIdPrefix = 'el' + String( Math.random() ).replace( /\D/g, '' ) + '_' #>
 			<p>
-				<label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:', 'default' ); ?></label>
+				<label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
 				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
 			</p>
 
 			<p>
-				<label for="{{ elementIdPrefix }}content" class="screen-reader-text"><?php esc_html_e( 'Content:', 'default' ); ?></label>
+				<label for="{{ elementIdPrefix }}content" id="{{ elementIdPrefix }}content-label"><?php esc_html_e( 'Content:' ); ?></label>
 				<textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
 			</p>
 
@@ -230,7 +230,7 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 				<?php if ( ! empty( $disallowed_html ) ) : ?>
 					<# if ( data.codeEditorDisabled ) { #>
 						<p>
-							<?php _e( 'Some HTML tags are not permitted, including:', 'default' ); ?>
+							<?php _e( 'Some HTML tags are not permitted, including:' ); ?>
 							<code><?php echo join( '</code>, <code>', $disallowed_html ); ?></code>
 						</p>
 					<# } #>
@@ -254,26 +254,29 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 		$content .= __( 'Use the Custom HTML widget to add arbitrary HTML code to your widget areas.' );
 		$content .= '</p>';
 
-		$content .= '<p>' . __( 'When using a keyboard to navigate:' ) . '</p>';
+		if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
-		$content .= '<ul>';
-		$content .= '<li>' . __( 'In the HTML edit field, Tab enters a tab character.' ) . '</li>';
-		$content .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.' ) . '</li>';
-		$content .= '</ul>';
-
 			$content .= '<p>';
 			$content .= sprintf(
 				/* translators: placeholder is link to user profile */
-			__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plan text mode.' ),
+				__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
 				sprintf(
 					' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
-				esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
+					esc_url( get_edit_profile_url() ),
 					__( 'user profile' ),
 					/* translators: accessibility text */
-				__( '(opens in a new window)', 'default' )
+					__( '(opens in a new window)' )
 				)
 			);
 			$content .= '</p>';
 
+			$content .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
+			$content .= '<ul>';
+			$content .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
+			$content .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
+			$content .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
+			$content .= '</ul>';
+		}
+
 		$screen->add_help_tab( array(
 			'id' => 'custom_html_widget',
 			'title' => __( 'Custom HTML Widget' ),