Changeset 45729

Timestamp:

08/03/2019 03:45:06 PM (6 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/revisions.css (modified) (5 diffs)
• wp-includes/class-wp-text-diff-renderer-table.php (modified) (3 diffs)

trunk/src/wp-admin/css/revisions.css

@@ -224 +224 @@
     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;
@@ -245 +245 @@
 
 table.diff .diff-deletedline {
+    position: relative;
     background-color: #ffe9e9;
 }
@@ -253 +254 @@
 
 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;
 }
 
@@ -522 +540 @@
 .wp-slider .ui-slider-range {
     position: absolute;
-    font-size: .7em;
+    font-size: 0.7em;
     display: block;
     border: 0;
@@ -530 +548 @@
 
 .wp-slider.ui-slider-horizontal {
-    height: .7em;
+    height: 0.7em;
 }
 

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

@@ -114 +114 @@
      */
     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>";
 
     }
@@ -125 +125 @@
      */
     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>";
     }
 
@@ -135 +135 @@
      */
     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>";
     }