From 1f92cbb9c6e129f79131912d0bd5f0ff1e056250 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sat, 3 Aug 2019 15:45:06 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@45729 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/revisions.css                | 26 ++++++++++++++++---
 .../class-wp-text-diff-renderer-table.php     |  6 ++---
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css
index 5f578b9a8c..16b8278aa3 100644
--- a/src/wp-admin/css/revisions.css
+++ b/src/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;
-	padding: .5em;
+	line-height: 1.57142857;
+	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 {
diff --git a/src/wp-includes/class-wp-text-diff-renderer-table.php b/src/wp-includes/class-wp-text-diff-renderer-table.php
index e4e06a43b4..e2da03f4ed 100644
--- a/src/wp-includes/class-wp-text-diff-renderer-table.php
+++ b/src/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>";
 	}
 
 	/**