Accessibility: Improve the differences between revisions.

Color alone is not sufficient to visually communicate differences.

- adds `plus` and `minus` icons to the changed lines
- adds visually hidden text: `Added`, `Deleted`, and `Unchanged` to clarify the differences to assistive technologies users

Props birgire, audrasjb, kjellr, adamsilverstein.
Fixes #43532.

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


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

wp-admin/css/revisions-rtl.css

@@ -223,8 +223,8 @@ table.diff td,
 table.diff th {
 	font-family: Consolas, Monaco, monospace;
 	font-size: 14px;
-	line-height: 1.618;
+	line-height: 1.57142857;
-	padding: .5em;
+	padding: 0.5em 2em 0.5em 0.5em;
 	vertical-align: top;
 	word-wrap: break-word;
 }
@@ -244,6 +244,7 @@ table.diff .diff-addedline ins {
 }
 
 table.diff .diff-deletedline {
+	position: relative;
 	background-color: #ffe9e9;
 }
 
@@ -252,9 +253,26 @@ table.diff .diff-deletedline del {
 }
 
 table.diff .diff-addedline {
+	position: relative;
 	background-color: #e9ffe9;
 }
 
+table.diff .diff-deletedline .dashicons,
+table.diff .diff-addedline .dashicons {
+	position: absolute;
+	top: 0.85714286em;
+	right: 0.5em;
+	width: 1em;
+	height: 1em;
+	font-size: 1em;
+	line-height: 1;
+}
+
+table.diff .diff-addedline .dashicons {
+	/* Compensate the vertically non-centered plus glyph. */
+	top: 0.92857143em;
+}
+
 table.diff .diff-addedline ins {
 	background-color: #afa;
 }
@@ -521,7 +539,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 
 .wp-slider .ui-slider-range {
 	position: absolute;
-	font-size: .7em;
+	font-size: 0.7em;
 	display: block;
 	border: 0;
 	background-color: transparent;
@@ -529,7 +547,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 }
 
 .wp-slider.ui-slider-horizontal {
-	height: .7em;
+	height: 0.7em;
 }
 
 .wp-slider.ui-slider-horizontal .ui-slider-handle {

wp-admin/css/revisions.css

@@ -223,8 +223,8 @@ table.diff td,
 table.diff th {
 	font-family: Consolas, Monaco, monospace;
 	font-size: 14px;
-	line-height: 1.618;
+	line-height: 1.57142857;
-	padding: .5em;
+	padding: 0.5em 0.5em 0.5em 2em;
 	vertical-align: top;
 	word-wrap: break-word;
 }
@@ -244,6 +244,7 @@ table.diff .diff-addedline ins {
 }
 
 table.diff .diff-deletedline {
+	position: relative;
 	background-color: #ffe9e9;
 }
 
@@ -252,9 +253,26 @@ table.diff .diff-deletedline del {
 }
 
 table.diff .diff-addedline {
+	position: relative;
 	background-color: #e9ffe9;
 }
 
+table.diff .diff-deletedline .dashicons,
+table.diff .diff-addedline .dashicons {
+	position: absolute;
+	top: 0.85714286em;
+	left: 0.5em;
+	width: 1em;
+	height: 1em;
+	font-size: 1em;
+	line-height: 1;
+}
+
+table.diff .diff-addedline .dashicons {
+	/* Compensate the vertically non-centered plus glyph. */
+	top: 0.92857143em;
+}
+
 table.diff .diff-addedline ins {
 	background-color: #afa;
 }
@@ -521,7 +539,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 
 .wp-slider .ui-slider-range {
 	position: absolute;
-	font-size: .7em;
+	font-size: 0.7em;
 	display: block;
 	border: 0;
 	background-color: transparent;
@@ -529,7 +547,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 }
 
 .wp-slider.ui-slider-horizontal {
-	height: .7em;
+	height: 0.7em;
 }
 
 .wp-slider.ui-slider-horizontal .ui-slider-handle {

wp-includes/class-wp-text-diff-renderer-table.php

@@ -113,7 +113,7 @@ class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer {
 	 * @return string
 	 */
 	public function addedLine( $line ) {
-		return "<td class='diff-addedline'>{$line}</td>";
+		return "<td class='diff-addedline'><span aria-hidden='true' class='dashicons dashicons-plus'></span><span class='screen-reader-text'>" . __( 'Added:' ) . " </span>{$line}</td>";
 
 	}
 
@@ -124,7 +124,7 @@ class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer {
 	 * @return string
 	 */
 	public function deletedLine( $line ) {
-		return "<td class='diff-deletedline'>{$line}</td>";
+		return "<td class='diff-deletedline'><span aria-hidden='true' class='dashicons dashicons-minus'></span><span class='screen-reader-text'>" . __( 'Deleted:' ) . " </span>{$line}</td>";
 	}
 
 	/**
@@ -134,7 +134,7 @@ class WP_Text_Diff_Renderer_Table extends Text_Diff_Renderer {
 	 * @return string
 	 */
 	public function contextLine( $line ) {
-		return "<td class='diff-context'>{$line}</td>";
+		return "<td class='diff-context'><span class='screen-reader-text'>" . __( 'Unchanged:' ) . " </span>{$line}</td>";
 	}
 
 	/**

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-alpha-45728';
+$wp_version = '5.3-alpha-45729';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.