Accessibility: Make the Widgets screen "Enable accessibility mode" link more discoverable.

For a number of years, the link to the Widgets screen "Accessibility mode" lived
in the Screen Options panel, hidden by default. Many users, including assistive
technologies users, weren't able to find it or even aware it existed. By bringing
the link in the main screen, visible by default, this change makes the
"Accessibility mode" easily discoverable for everyone.

Props chetan200891, antonioeatgoat.
Fixes #42778.

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


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

wp-admin/css/widgets-rtl.css

@@ -495,6 +495,11 @@ div#widgets-right .closed .widgets-sortables {
 }
 
 /* Accessibility Mode */
+.widget-access-link {
+	float: left;
+	margin: -5px 10px 10px 0;
+}
+
 .widgets_access #widgets-left .widget .widget-top {
 	cursor: auto;
 }
@@ -793,6 +798,11 @@ ul.CodeMirror-hints {
 		margin: 0 auto !important;
 		max-width: 480px;
 	}
+
+	.widget-access-link {
+		float: none;
+		margin: 15px 0 0 0;
+	}
 }
 
 @media screen and (max-width: 320px) {

wp-admin/css/widgets.css

@@ -495,6 +495,11 @@ div#widgets-right .closed .widgets-sortables {
 }
 
 /* Accessibility Mode */
+.widget-access-link {
+	float: right;
+	margin: -5px 0 10px 10px;
+}
+
 .widgets_access #widgets-left .widget .widget-top {
 	cursor: auto;
 }
@@ -793,6 +798,11 @@ ul.CodeMirror-hints {
 		margin: 0 auto !important;
 		max-width: 480px;
 	}
+
+	.widget-access-link {
+		float: none;
+		margin: 15px 0 0 0;
+	}
 }
 
 @media screen and (max-width: 320px) {

wp-admin/includes/class-wp-screen.php

@@ -918,20 +918,13 @@ if ( $this->show_screen_options() ) :
 
 		$show_screen = ! empty( $wp_meta_boxes[ $this->id ] ) || $columns || $this->get_option( 'per_page' );
 
-		switch ( $this->base ) {
+		$this->_screen_settings = '';
-			case 'widgets':
+
-				$nonce                  = wp_create_nonce( 'widgets-access' );
+		if ( 'post' === $this->base ) {
-				$this->_screen_settings = '<p><a id="access-on" href="widgets.php?widgets-access=on&_wpnonce=' . urlencode( $nonce ) . '">' . __( 'Enable accessibility mode' ) . '</a><a id="access-off" href="widgets.php?widgets-access=off&_wpnonce=' . urlencode( $nonce ) . '">' . __( 'Disable accessibility mode' ) . "</a></p>\n";
-				break;
-			case 'post':
 			$expand                 = '<fieldset class="editor-expand hidden"><legend>' . __( 'Additional settings' ) . '</legend><label for="editor-expand-toggle">';
 			$expand                .= '<input type="checkbox" id="editor-expand-toggle"' . checked( get_user_setting( 'editor_expand', 'on' ), 'on', false ) . ' />';
 			$expand                .= __( 'Enable full-height editor and distraction-free functionality.' ) . '</label></fieldset>';
 			$this->_screen_settings = $expand;
-				break;
-			default:
-				$this->_screen_settings = '';
-				break;
 		}
 
 		/**

wp-admin/widgets.php

@@ -399,7 +399,12 @@ if ( current_user_can( 'customize' ) ) {
 		__( 'Manage with Live Preview' )
 	);
 }
+
+$nonce = wp_create_nonce( 'widgets-access' );
 ?>
+<div class="widget-access-link">
+	<a id="access-on" href="widgets.php?widgets-access=on&_wpnonce=<?php echo urlencode( $nonce ); ?>"><?php _e( 'Enable accessibility mode' ); ?></a><a id="access-off" href="widgets.php?widgets-access=off&_wpnonce=<?php echo urlencode( $nonce ); ?>"><?php _e( 'Disable accessibility mode' ); ?></a>
+</div>
 
 <hr class="wp-header-end">
 

wp-includes/version.php

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