WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 3 weeks ago

#43532 assigned enhancement

Improve the visual difference between revisions - not only color based

Reported by: birgire Owned by: afercia
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Revisions Keywords: has-screenshots ux-feedback has-patch
Focuses: accessibility, administration Cc:

Description (last modified by birgire)

The visual difference between revisions is only based on the background colors light green and light red.

It might not be visually suited for everyone to depend on only colors. Devices and environment can also be a factor.

I think adding some text aids could help here: wp-admin/revision.php?revision=123.

Maybe From/To headers and/or plus(+)/minus(-) in each line.

We have a From/To when the "Compare any two revisions" is checked, but it might not be obvious what column is From and what column is To.

I'm not sure what the future is for the wp-admin/revision.php screen is with Gutenberg, but I decided to post this anyway.

Attachments (7)

revision-before.jpg (29.0 KB) - added by birgire 16 months ago.
revision-compare-before.jpg (34.1 KB) - added by birgire 16 months ago.
revision-compare-after.jpg (27.6 KB) - added by birgire 16 months ago.
43532.diff (2.5 KB) - added by audrasjb 16 months ago.
43532.diff: improves difference between twho revisions
Capture d’écran 2018-03-19 à 21.52.31.png (49.4 KB) - added by audrasjb 16 months ago.
43532.diff: improves difference between twho revisions
43532.2.diff (2.3 KB) - added by audrasjb 16 months ago.
Fixes dashicons use
Capture d’écran 2018-03-26 à 21.51.29.png (66.2 KB) - added by audrasjb 16 months ago.
43532.2.diff: Fixes dashicons use

Download all attachments as: .zip

Change History (24)

#1 @birgire
16 months ago

  • Description modified (diff)
  • Focuses ui removed
  • Keywords has-screenshots ux-feedback added

#2 @birgire
16 months ago

The Restore This Revision button in revision-before.jpg and revision-compare-before.jpg are not in the most eye-pleasing positions. Maybe there's a ticket for that?

The revision-compare-after.jpg is a sketch where it's more clear what is the From and what is To. I understand that this kind of approach would need an adjustment for smaller mobile devices. The position of the Restore This Revision button here might also need adjustments. Here we also have an example of plus (+) and minus (-) text aids.

Last edited 16 months ago by birgire (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


16 months ago

#4 @afercia
16 months ago

  • Milestone changed from Awaiting Review to Future Release

Discussed during today's a11y but-scrub, seems a sensible and simple improvement. /cc @adamsilverstein

#5 @adamsilverstein
16 months ago

Hi @birgire - thanks for the ticket. I completely agree the UI can be improved here. Note however I think that the two columns represent what was added and what was removed in a specific revision so the column titles should maybe be “added” and “removed”?

@audrasjb
16 months ago

43532.diff: improves difference between twho revisions

@audrasjb
16 months ago

43532.diff: improves difference between twho revisions

#6 @audrasjb
16 months ago

  • Keywords has-patch added
  • Version 3.6 deleted

Hello and thanks for the ticket @birgire I think this is really relevant.

As a first step, 43532.diff improves the visual difference between two revisions and avoid "color only" distinction.

I also added screen-reader-text in td cells to add information about the status of each cell:

  • Deleted line
  • Added line
  • Unchanged line

Cheers,
Jb

#7 @birgire
16 months ago

@adamsilverstein that's a good suggestion having the column titles “added” and “removed”, they explain it better than just "from" and "to".

@audrasjb thanks for the patch, I just tested it. I also like that with it one can copy the diff text without the pluses or minuses (just personal preference). But should the pluses and minuses also be read by screen readers? This comment by @afercia here, comes to mind regarding CSS generated content.

#8 @audrasjb
16 months ago

Hello @birgire , thanks for your feedback.

That's why I added some screen reader texts :) On the top of each cell, screen reader users will read "Added", "Deleted" or "Unchanged" label. Indeed, I added this because CSS generated content are not readable by AT users.

#9 @birgire
16 months ago

ps: sorry I didn't explain my self better here ;-) What I had in mind was that in addition to the "Added", "Deleted" or "Unchanged" screen readers text, if the we should avoid the pluses or minuses for the screen readers, because it's already covered with the more descriptive screen readers labels. As in the comment I linked to, @afercia wrote: In a few words: some screen readers already read out CSS generated content and more will do in the next future..

#10 @audrasjb
16 months ago

Thanks @birgire for your explanations, I'd say you're totally alright.
43532.2.diff should fix it :)

@audrasjb
16 months ago

Fixes dashicons use

@audrasjb
16 months ago

43532.2.diff: Fixes dashicons use

#11 @audrasjb
10 months ago

  • Milestone changed from Future Release to 4.9.9

As seen during accessibility team meeting, let's move some tickets to 4.9.9 milestone to see if it can land in the next minor.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 months ago

#13 @pento
9 months ago

  • Milestone 4.9.9 deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Closing this, as the entire revisions interface will need to be redone to fit in with the block editor.

#14 @johnbillion
6 weeks ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened

It seems that wontfixing this because of an unplanned future change based on the block editor is a bit premature. This enhancement is valuable for usability and accessibility regardless of whether the block editor is in use.

#15 @johnbillion
6 weeks ago

  • Milestone set to Awaiting Review

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 weeks ago

#17 @afercia
3 weeks ago

  • Milestone changed from Awaiting Review to 5.3
  • Owner set to afercia
  • Status changed from reopened to assigned

Discussed during today's accessibility bug-scrub and agreed this seems a relatively small and self-contained improvement. Worth trying it for 5.3.

Note: See TracTickets for help on using tickets.