From e6297676fb4da64c59f1e357974efbb85e2c2815 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 11 Jan 2016 22:53:10 +0000 Subject: [PATCH] Accessibility: Remove title attributes from the General Settings screen. Date and time formats are now displayed in plain text and available for all users. Also, lines up them with the "custom" date and time format fields to help reinforce what these fields do. Props afercia, perezlabs. Fixes #35064. git-svn-id: https://develop.svn.wordpress.org/trunk@36263 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/forms.css | 37 ++++++++++++++++++------ src/wp-admin/includes/options.php | 4 +-- src/wp-admin/options-general.php | 48 +++++++++++++++++++------------ 3 files changed, 60 insertions(+), 29 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 7f9b9c565e..5874f4eb48 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -655,6 +655,14 @@ ul#add-to-blog-users { margin-bottom: 0; } +.form-table .date-time-doc { + margin-top: 1em; +} + +.form-table p.timezone-info { + margin: 1em 0; +} + .form-table td fieldset label { margin: 0.25em 0 0.5em !important; display: inline-block; @@ -893,9 +901,8 @@ table.form-table td .updated p { 20.0 - Settings ------------------------------------------------------------------------------*/ -#utc-time, #local-time { - padding-left: 25px; - font-style: italic; +.timezone-info code { + white-space: nowrap; } .defaultavatarpicker .avatar { @@ -903,6 +910,11 @@ table.form-table td .updated p { vertical-align: middle; } +.options-general-php .date-time-text { + display: inline-block; + min-width: 10em; +} + .options-general-php input.small-text { width: 56px; } @@ -1268,16 +1280,11 @@ table.form-table td .updated p { display: block; } - #utc-time { - margin-top: 10px; - } - #utc-time, #local-time { display: block; float: none; - padding: 0; - line-height: 2; + margin-top: 0.5em; } .form-field #domain { @@ -1316,6 +1323,11 @@ table.form-table td .updated p { .wp-pwd .button .text { display: none; } + + .options-general-php input[type="text"].small-text { + max-width: 60px; + margin: 0; + } } @media only screen and (max-width: 768px) { @@ -1358,3 +1370,10 @@ table.form-table td .updated p { width: 49%; } } + +@media only screen and (max-width: 320px) { + .options-general-php .date-time-text.date-time-custom-text { + min-width: 0; + margin-right: 0.5em; + } +} diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php index f0fab455ff..7ac02929a9 100644 --- a/src/wp-admin/includes/options.php +++ b/src/wp-admin/includes/options.php @@ -51,7 +51,7 @@ function options_general_add_js() { $("input[name='date_format']").click(function(){ if ( "date_format_custom_radio" != $(this).attr("id") ) - $( "input[name='date_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).text() ); + $( "input[name='date_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() ); }); $("input[name='date_format_custom']").focus(function(){ $( '#date_format_custom_radio' ).prop( 'checked', true ); @@ -59,7 +59,7 @@ function options_general_add_js() { $("input[name='time_format']").click(function(){ if ( "time_format_custom_radio" != $(this).attr("id") ) - $( "input[name='time_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).text() ); + $( "input[name='time_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() ); }); $("input[name='time_format_custom']").focus(function(){ $( '#time_format_custom_radio' ).prop( 'checked', true ); diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php index 2a704ce928..5f18170ea8 100644 --- a/src/wp-admin/options-general.php +++ b/src/wp-admin/options-general.php @@ -145,23 +145,28 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists +

+ + +

UTC time is %s' ), + /* translators: 1: UTC abbreviation, 2: UTC time */ + printf( __( 'Universal time (%1$s) is %2$s.' ), + '' . __( 'UTC' ) . '', '' . date_i18n( $timezone_format, false, 'gmt' ) . '' ); ?> - + ' . date_i18n( $timezone_format ) . '' ); ?> -

- -
+

+ +

+

@@ -232,18 +238,21 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists $custom = true; foreach ( $date_formats as $format ) { - echo "\t
\n"; + echo ' /> ' . date_i18n( $format ) . '' . $format . "
\n"; } - echo ' \n"; - echo ' ' . __( 'example:' ) . ' ' . date_i18n( get_option('date_format') ) . " \n"; + echo '/> ' . __( 'Custom:' ) . ' ' . __( 'enter a custom date format in the following field' ) . '' . + '' . + '' . + '' . __( 'example:' ) . ' ' . date_i18n( get_option( 'date_format' ) ) . '' . + "\n"; ?> @@ -265,20 +274,23 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists $custom = true; foreach ( $time_formats as $format ) { - echo "\t
\n"; + echo ' /> ' . date_i18n( $format ) . '' . $format . "
\n"; } - echo ' \n"; - echo ' ' . __( 'example:' ) . ' ' . date_i18n( get_option('time_format') ) . " \n"; + echo '/> ' . __( 'Custom:' ) . ' ' . __( 'enter a custom time format in the following field' ) . '' . + '' . + '' . + '' . __( 'example:' ) . ' ' . date_i18n( get_option( 'time_format' ) ) . '' . + "\n"; - echo "\t

" . __('Documentation on date and time formatting.') . "

\n"; + echo "\t

" . __('Documentation on date and time formatting.') . "

\n"; ?>