Diff adds to columns to the Revisions list of a node, which get populated with radio buttons. However, since there are no headings to the columns it is completely unclear for the user what these buttons are supposed to do.

Issue fork diff-2834253

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

martin.knapp created an issue. See original summary.

Ginovski’s picture

Status: Active » Needs review

We could add Revision 1 / Revision 2 (or simply just Revision)?

miro_dietiker’s picture

Status: Needs review » Active

We removed it because by removing it, the column gets narrow and relationship between collection more clear.

For accessibility reasons we could semantically readd it, but i would still suppress it with CSS, so no visual difference.
That said, "Revision" or "Revision 1" and "Revision 2" are adding more confusion than removing it. You select a revision and you know that. And the button "Compare" at the end of the form is self-explaining. We could try to improve it to "Compare selection".

Full accessibility support though is a different topic, we should look at the radio button labels in context of WAI-ARIA.

I'm highly open for better proposals.

Ginovski’s picture

Changed to 'Compare selection'.
Noticed that in AdminFormsTest, there is a fail because of revision done in different timestamp, Edit: It was failing locally only.

Ginovski’s picture

Status: Active » Needs review
miro_dietiker’s picture

Here a first reference about accessibility
http://webaim.org/techniques/forms/advanced
Sure, can go into a follow-up imho.

Ginovski’s picture

Status: Needs review » Active
Related issues: +#2838915: Improve compare button to "Compare selection"

Added followup #2838915: Improve compare button to "Compare selection", returning this issue to active.

bkosborne’s picture

Even with the button changed to "Compare selected revisions", we had an editor very confused by this. They did not understand the relationship of the radio buttons to the comparison and was confused why they could not select items from the same column, and were forced to pick diagonally. It's a bit jarring if you have a long list of revisions since you don't even see the "Compare selected revisions" without scrolling down the page.

I think what should probably be done is a different approach entirely. Use a single column of checkboxes, label the column "Compare", and disable the checkboxes after two have been selected with JavaScript.

Another option is to not use the table interface for comparing at all. Instead just use two select dropdowns at the bottom of the page for the "left comparison" and "right comparison" that lists all the revisions.

bkosborne’s picture

Another option, what about column labels "A" and "B"? I think that helps imply the comparison purpose of the columns without taking up space. But I guess downside here is that it may only make sense for English.

bkosborne’s picture

Status: Active » Needs review
FileSize
1.16 KB

This patch adds column headers A and B (not translated, since I think that may not work well for other languages?) and adds a table caption. Both of these changes improve accessibility for screen reader users and also sighted users.

miro_dietiker’s picture

I don't think that anything like A / B would improve the situation as long as there is no explanation.

The "Compare" button should really be sticky so a user doesn't have to scroll down to the end of the page...
I see that Olivero(? or at least Gin) is coming up with sticky buttons for the primary page CTA. That will help a lot.

A completely different approach with checkboxes might look visually easier. But the semantics of a checkbox don't allow us to express a "you can only choose two". If we ever rework this, then based on the best semantics and considering accessibility from the beginning. Research about other CMSes and best practices could help here.

The diff view has many other UX problems. The default selection of the revisions totally doesn't make sense in multilingual environment with draft revisions... But i don't know where to start as this feature is rarely requested by our customers recently and i think polishing will easily eat days.

joel_osc’s picture

smulvih2’s picture

This is a nice improvement. @bkosborne I might consider changing column headers A/B with "Select revision A"/"Select revision B", would be more intuitive I think. Might also consider changing the first column header from "Revision" to "Revision information".

smulvih2’s picture

Issue tags: +Accessibility
smulvih2’s picture

Updated the patch to use more descriptive column headers. Also updated the table caption.

@miro_dietiker ticket #3183380 implements the Compare button at the top of the page if there are over 5 revisions. This would be nice to have included in next release along with the other accessibility patches.

Liam Morland made their first commit to this issue’s fork.

Liam Morland’s picture

Version: 8.x-1.0-beta2 » 8.x-1.x-dev
edmund.dunn’s picture

This worked well for us!