sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Andrea Fercia 2019-08-03 15:45:06 +00:00
parent 882d3f5c16
commit 1f92cbb9c6
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/wp-admin/css/revisions.css
View File

@ -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 {

6
src/wp-includes/class-wp-text-diff-renderer-table.php
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>";
}
/**