Changeset 45729

Timestamp:

08/03/2019 03:45:06 PM (7 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>";
         }