WordPress.org

Make WordPress Core

Changeset 45729


Ignore:
Timestamp:
08/03/2019 03:45:06 PM (4 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/revisions.css

    r45468 r45729  
    224224    font-family: Consolas, Monaco, monospace;
    225225    font-size: 14px;
    226     line-height: 1.618;
    227     padding: .5em;
     226    line-height: 1.57142857;
     227    padding: 0.5em 0.5em 0.5em 2em;
    228228    vertical-align: top;
    229229    word-wrap: break-word;
     
    245245
    246246table.diff .diff-deletedline {
     247    position: relative;
    247248    background-color: #ffe9e9;
    248249}
     
    253254
    254255table.diff .diff-addedline {
     256    position: relative;
    255257    background-color: #e9ffe9;
     258}
     259
     260table.diff .diff-deletedline .dashicons,
     261table.diff .diff-addedline .dashicons {
     262    position: absolute;
     263    top: 0.85714286em;
     264    left: 0.5em;
     265    width: 1em;
     266    height: 1em;
     267    font-size: 1em;
     268    line-height: 1;
     269}
     270
     271table.diff .diff-addedline .dashicons {
     272    /* Compensate the vertically non-centered plus glyph. */
     273    top: 0.92857143em;
    256274}
    257275
     
    522540.wp-slider .ui-slider-range {
    523541    position: absolute;
    524     font-size: .7em;
     542    font-size: 0.7em;
    525543    display: block;
    526544    border: 0;
     
    530548
    531549.wp-slider.ui-slider-horizontal {
    532     height: .7em;
     550    height: 0.7em;
    533551}
    534552
  • trunk/src/wp-includes/class-wp-text-diff-renderer-table.php

    r45590 r45729  
    114114     */
    115115    public function addedLine( $line ) {
    116         return "<td class='diff-addedline'>{$line}</td>";
     116        return "<td class='diff-addedline'><span aria-hidden='true' class='dashicons dashicons-plus'></span><span class='screen-reader-text'>" . __( 'Added:' ) . " </span>{$line}</td>";
    117117
    118118    }
     
    125125     */
    126126    public function deletedLine( $line ) {
    127         return "<td class='diff-deletedline'>{$line}</td>";
     127        return "<td class='diff-deletedline'><span aria-hidden='true' class='dashicons dashicons-minus'></span><span class='screen-reader-text'>" . __( 'Deleted:' ) . " </span>{$line}</td>";
    128128    }
    129129
     
    135135     */
    136136    public function contextLine( $line ) {
    137         return "<td class='diff-context'>{$line}</td>";
     137        return "<td class='diff-context'><span class='screen-reader-text'>" . __( 'Unchanged:' ) . " </span>{$line}</td>";
    138138    }
    139139
Note: See TracChangeset for help on using the changeset viewer.