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
This commit is contained in:
Andrea Fercia 2018-03-06 17:21:33 +00:00
parent 6c09e79cc5
commit 6a4b2a022a
7 changed files with 35 additions and 17 deletions

View File

@ -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) {

File diff suppressed because one or more lines are too long

View File

@ -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) {

File diff suppressed because one or more lines are too long

View File

@ -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 ) {
case 'widgets':
$nonce = wp_create_nonce( 'widgets-access' );
$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;
$this->_screen_settings = '';
if ( 'post' === $this->base ) {
$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;
}
/**

View File

@ -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">

View File

@ -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.