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
This commit is contained in:
Andrea Fercia
2019-08-03 15:46:54 +00:00
parent cbd6b7b5bc
commit b853e21bf9
6 changed files with 50 additions and 14 deletions

View File

@@ -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>";
}
/**