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";
?>