From e12f3793d500020f290624bf6611ee0e340d1418 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 2 Sep 2019 21:43:39 +0000
Subject: [PATCH] Accessibility: Audit usage of abbreviations.

Title attributes on abbreviations are only available to a minority of users. The
best option is to avoid unnecessary abbreviations when possible. In the other cases,
use an `<abbr>` element (which provides a hint to user agents on how to announce
and display the abbreviation) and provide an expansion in plain text on first use.

- `readme.html`: improves abbreviations and removes unnecessary `title` attributes
- options-general: removes unnecessary abbreviations and improves the remaining ones
- customizer schedule changeset date: removes unnecessary abbreviations and improves the remaining ones
- posts table date: uses a `span` element instead of an `abbr` element because this is not an abbreviation

Fixes #46980.


git-svn-id: https://develop.svn.wordpress.org/trunk@45930 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/readme.html                               | 12 ++++-----
 src/wp-admin/css/common.css                   |  1 -
 src/wp-admin/css/customize-controls.css       | 10 --------
 src/wp-admin/css/list-tables.css              |  5 ++++
 .../includes/class-wp-posts-list-table.php    |  2 +-
 src/wp-admin/options-general.php              | 15 ++++++++---
 src/wp-includes/css/admin-bar.css             |  1 -
 .../class-wp-customize-date-time-control.php  | 25 +++++++++++++------
 tests/qunit/index.html                        |  2 +-
 9 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/readme.html b/src/readme.html
index de771081dd..5249c316e8 100644
--- a/src/readme.html
+++ b/src/readme.html
@@ -26,7 +26,7 @@
 			<li>Open <span class="file"><a href="wp-admin/install.php">wp-admin/install.php</a></span> in your browser.</li>
 		</ol>
 	</li>
-	<li>Once the configuration file is set up, the installer will set up the tables needed for your site. If there is an error, double check your <code>wp-config.php</code> file, and try again. If it fails again, please go to the <a href="https://wordpress.org/support/forums/" title="WordPress support">support forums</a> with as much data as you can gather.</li>
+	<li>Once the configuration file is set up, the installer will set up the tables needed for your site. If there is an error, double check your <code>wp-config.php</code> file, and try again. If it fails again, please go to the <a href="https://wordpress.org/support/forums/">WordPress support forums</a> with as much data as you can gather.</li>
 	<li><strong>If you did not enter a password, note the password given to you.</strong> If you did not provide a username, it will be <code>admin</code>.</li>
 	<li>The installer should then send you to the <a href="wp-login.php">login page</a>. Sign in with the username and password you chose during the installation. If a password was generated for you, you can then click on &#8220;Profile&#8221; to change the password.</li>
 </ol>
@@ -48,7 +48,7 @@
 </ol>
 
 <h2>Migrating from other systems</h2>
-<p>WordPress can <a href="https://wordpress.org/support/article/importing-content/">import from a number of systems</a>. First you need to get WordPress installed and working as described above, before using <a href="wp-admin/import.php" title="Import to WordPress">our import tools</a>.</p>
+<p>WordPress can <a href="https://wordpress.org/support/article/importing-content/">import from a number of systems</a>. First you need to get WordPress installed and working as described above, before using <a href="wp-admin/import.php">our import tools</a>.</p>
 
 <h2>System Requirements</h2>
 <ul>
@@ -76,23 +76,23 @@
 		<dd>The WordPress Planet is a news aggregator that brings together posts from WordPress blogs around the web.</dd>
 	<dt><a href="https://wordpress.org/support/forums/">WordPress Support Forums</a></dt>
 		<dd>If you&#8217;ve looked everywhere and still can&#8217;t find an answer, the support forums are very active and have a large community ready to help. To help them help you be sure to use a descriptive thread title and describe your question in as much detail as possible.</dd>
-	<dt><a href="https://codex.wordpress.org/IRC">WordPress <abbr title="Internet Relay Chat">IRC</abbr> Channel</a></dt>
+	<dt><a href="https://codex.wordpress.org/IRC">WordPress <abbr>IRC</abbr> (Internet Relay Chat) Channel</a></dt>
 		<dd>There is an online chat channel that is used for discussion among people who use WordPress and occasionally support topics. The above wiki page should point you in the right direction. (<a href="irc://irc.freenode.net/wordpress">irc.freenode.net #wordpress</a>)</dd>
 </dl>
 
 <h2>Final Notes</h2>
 <ul>
 	<li>If you have any suggestions, ideas, or comments, or if you (gasp!) found a bug, join us in the <a href="https://wordpress.org/support/forums/">Support Forums</a>.</li>
-	<li>WordPress has a robust plugin <abbr title="application programming interface">API</abbr> that makes extending the code easy. If you are a developer interested in utilizing this, see the <a href="https://developer.wordpress.org/plugins/">Plugin Developer Handbook</a>. You shouldn&#8217;t modify any of the core code.</li>
+	<li>WordPress has a robust plugin <abbr>API</abbr> (Application Programming Interface) that makes extending the code easy. If you are a developer interested in utilizing this, see the <a href="https://developer.wordpress.org/plugins/">Plugin Developer Handbook</a>. You shouldn&#8217;t modify any of the core code.</li>
 </ul>
 
 <h2>Share the Love</h2>
 <p>WordPress has no multi-million dollar marketing campaign or celebrity sponsors, but we do have something even better&#8212;you. If you enjoy WordPress please consider telling a friend, setting it up for someone less knowledgable than yourself, or writing the author of a media article that overlooks us.</p>
 
-<p>WordPress is the official continuation of <a href="http://cafelog.com/">b2/caf&#233;log</a>, which came from Michel V. The work has been continued by the <a href="https://wordpress.org/about/">WordPress developers</a>. If you would like to support WordPress, please consider <a href="https://wordpress.org/donate/" title="Donate to WordPress">donating</a>.</p>
+<p>WordPress is the official continuation of <a href="http://cafelog.com/">b2/caf&#233;log</a>, which came from Michel V. The work has been continued by the <a href="https://wordpress.org/about/">WordPress developers</a>. If you would like to support WordPress, please consider <a href="https://wordpress.org/donate/">donating</a>.</p>
 
 <h2>License</h2>
-<p>WordPress is free software, and is released under the terms of the <abbr title="GNU General Public License">GPL</abbr> version 2 or (at your option) any later version. See <a href="license.txt">license.txt</a>.</p>
+<p>WordPress is free software, and is released under the terms of the <abbr>GPL</abbr> (GNU General Public License) version 2 or (at your option) any later version. See <a href="license.txt">license.txt</a>.</p>
 
 </body>
 </html>
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 406e522411..fcad32d7d6 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3090,7 +3090,6 @@ img {
 	font-size: 13px;
 	background: #f9f9f9;
 	-moz-tab-size: 4;
-	-o-tab-size: 4;
 	tab-size: 4;
 }
 
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 2c780fbfeb..a83b6fff09 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -359,11 +359,6 @@ body.trashing #publish-settings {
 	margin-top: 12px;
 }
 
-.date-time-fields .date-timezone {
-	line-height: 2.2;
-	text-decoration: none;
-}
-
 #customize-control-changeset_preview_link {
 	margin-top: 6px;
 }
@@ -1589,7 +1584,6 @@ p.customize-section-description {
 	font-size: 12px;
 	padding: 6px 8px;
 	-moz-tab-size: 2;
-	-o-tab-size: 2;
 	tab-size: 2;
 }
 .customize-control-code_editor textarea,
@@ -2784,10 +2778,6 @@ body.adding-widget .add-new-widget:before,
 		width: 80px;
 	}
 
-	.date-time-fields .date-timezone {
-		line-height: 3.2;
-	}
-
 	#customize-control-changeset_preview_link a {
 		bottom: 16px;
 	}
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 675bd23028..a475b3162e 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -310,6 +310,11 @@ table.fixed {
 	width: 10%;
 }
 
+.column-date span[title] {
+	-webkit-text-decoration: dotted underline;
+	text-decoration: dotted underline;
+}
+
 .fixed .column-posts {
 	width: 74px;
 }
diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php
index 3f95a2e7a8..b0346ddaaa 100644
--- a/src/wp-admin/includes/class-wp-posts-list-table.php
+++ b/src/wp-admin/includes/class-wp-posts-list-table.php
@@ -1127,7 +1127,7 @@ class WP_Posts_List_Table extends WP_List_Table {
 		} else {
 
 			/** This filter is documented in wp-admin/includes/class-wp-posts-list-table.php */
-			echo '<abbr title="' . $t_time . '">' . apply_filters( 'post_date_column_time', $h_time, $post, 'date', $mode ) . '</abbr>';
+			echo '<span title="' . $t_time . '">' . apply_filters( 'post_date_column_time', $h_time, $post, 'date', $mode ) . '</span>';
 		}
 	}
 
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 297930d2e9..562a4aed21 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -228,15 +228,22 @@ if ( empty( $tzstring ) ) { // Create a UTC+- zone if no timezone string exists
 	<?php echo wp_timezone_choice( $tzstring, get_user_locale() ); ?>
 </select>
 
-<p class="description" id="timezone-description"><?php _e( 'Choose either a city in the same timezone as you or a UTC timezone offset.' ); ?></p>
+<p class="description" id="timezone-description">
+<?php
+	printf(
+		/* translators: %s: UTC abbreviation */
+		__( 'Choose either a city in the same timezone as you or a %s (Coordinated Universal Time) time offset.' ),
+		'<abbr>UTC</abbr>'
+	);
+	?>
+</p>
 
 <p class="timezone-info">
 	<span id="utc-time">
 	<?php
 		printf(
-			/* translators: 1: UTC abbreviation, 2: UTC time */
-			__( 'Universal time (%1$s) is %2$s.' ),
-			'<abbr>' . __( 'UTC' ) . '</abbr>',
+			/* translators: 1: UTC time */
+			__( 'Universal time is %1$s.' ),
 			'<code>' . date_i18n( $timezone_format, false, true ) . '</code>'
 		);
 		?>
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 0e20895226..d0f4457e7a 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -1065,7 +1065,6 @@ html:lang(he-il) .rtl #wpadminbar * {
 		to 100% viewport width at responsive sizes. */
 	#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
 		min-width: -webkit-fit-content;
-		min-width: -moz-fit-content;
 		min-width: fit-content;
 	}
 
diff --git a/src/wp-includes/customize/class-wp-customize-date-time-control.php b/src/wp-includes/customize/class-wp-customize-date-time-control.php
index 7eea180f74..904f48488a 100644
--- a/src/wp-includes/customize/class-wp-customize-date-time-control.php
+++ b/src/wp-includes/customize/class-wp-customize-date-time-control.php
@@ -173,7 +173,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 								<option value="pm"><?php esc_html_e( 'PM' ); ?></option>
 							</select>
 						<# } #>
-						<abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
+						<p><?php echo $timezone_info['description']; ?></p>
 					</div>
 				</fieldset>
 			<# } #>
@@ -228,21 +228,30 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 
 			if ( $tz ) {
 				$now                   = new DateTime( 'now', $tz );
-				$formatted_gmt_offset  = sprintf( 'UTC%s', $this->format_gmt_offset( $tz->getOffset( $now ) / 3600 ) );
+				$formatted_gmt_offset  = $this->format_gmt_offset( $tz->getOffset( $now ) / 3600 );
 				$tz_name               = str_replace( '_', ' ', $tz->getName() );
 				$timezone_info['abbr'] = $now->format( 'T' );
 
-				/* translators: 1: timezone name, 2: timezone abbreviation, 3: gmt offset  */
-				$timezone_info['description'] = sprintf( __( 'Timezone is %1$s (%2$s), currently %3$s.' ), $tz_name, $timezone_info['abbr'], $formatted_gmt_offset );
+				$timezone_info['description'] = sprintf(
+					/* translators: 1: timezone name, 2: timezone abbreviation, 3: UTC abbreviation and offset, 4: UTC offset  */
+					__( 'Your timezone is set to %1$s (%2$s), currently %3$s (Coordinated Universal Time %4$s).' ),
+					$tz_name,
+					'<abbr>' . $timezone_info['abbr'] . '</abbr>',
+					'<abbr>UTC</abbr>' . $formatted_gmt_offset,
+					$formatted_gmt_offset
+				);
 			} else {
 				$timezone_info['description'] = '';
 			}
 		} else {
-			$formatted_gmt_offset  = $this->format_gmt_offset( intval( get_option( 'gmt_offset', 0 ) ) );
-			$timezone_info['abbr'] = sprintf( 'UTC%s', $formatted_gmt_offset );
+			$formatted_gmt_offset = $this->format_gmt_offset( intval( get_option( 'gmt_offset', 0 ) ) );
 
-			/* translators: %s: UTC offset  */
-			$timezone_info['description'] = sprintf( __( 'Timezone is %s.' ), $timezone_info['abbr'] );
+			$timezone_info['description'] = sprintf(
+				/* translators: 1: UTC abbreviation and offset, 2: UTC offset */
+				__( 'Your timezone is set to %1$s (Coordinated Universal Time %2$s).' ),
+				'<abbr>UTC</abbr>' . $formatted_gmt_offset,
+				$formatted_gmt_offset
+			);
 		}
 
 		return $timezone_info;
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index 530a272735..1d9e688915 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -949,7 +949,7 @@
 								<option value="pm">PM</option>
 							</select>
 						<# } #>
-						<abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
+						<p>Your timezone is set to America/Los Angeles (<abbr>PDT</abbr>), currently <abbr>UTC</abbr>-7 (Coordinated Universal Time -7).</p>
 					</div>
 				</fieldset>
 			<# } #>