Make revisions overview page accessible [#3228798]

Problem/Motivation

The revisions overview page currently fails a11y testing because the link text is the same and are not differentiated with a title attribute and the radio buttons have no labels. Also related #2834253: Missing column headings in Revisions list.

Comment	File	Size	Author
#17	diff-3228798-17.patch	3.77 KB	silvi.addweb
#15	diff-a11y-3228798-15.patch	3.78 KB	smulvih2
#10	diff-a11y-3228798-10.patch	3.97 KB	joel_osc
#9	diff-a11y-3228798-9.patch	1.98 KB	joel_osc
#7	a11y_diff.png	224.72 KB	joel_osc
#2	diff-revision_build_alter-3201483-2.patch	3.43 KB	joel_osc
#4	diff-a11y-3228798-4.patch	1.95 KB	joel_osc

Issue fork diff-3228798

Show commands

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

Add & fetch this issue fork’s repository

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

Add & fetch this issue fork’s repository

8.x-1.x changes, plain diff MR !72
Check out this branch for the first time

Check out existing branch, if you already have it locally
3228798-make-revisions-overview compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

18 August 2021 at 17:19

joel_osc created an issue. See original summary.

Comment #2

joel_osc commented 18 August 2021 at 17:20

Status	File	Size
new	diff-revision_build_alter-3201483-2.patch	3.43 KB

Here is a patch that adds text to the radios and title attributes to the revert and delete links.

Comment #3

joel_osc commented 18 August 2021 at 17:25

Status:

Active

» Needs review

Comment #4

joel_osc commented 18 August 2021 at 17:41

Status	File	Size
new	diff-a11y-3228798-4.patch	1.95 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	diff-revision_build_alter-3201483-2.patch	3.43 KB

Shoot, wrong patch - here is the correct one.

Comment #5

joel_osc commented 18 August 2021 at 18:54

Title:

Make revsions oversion page accessible

» Make revisions overview page accessible

Comment #6

miro_dietiker

Switzerland

commented 19 August 2021 at 07:15

Issue tags:

+Accessibility

Great to see accessibility contributions, thank you!

Just a quick question:
Does this change anything in the static display to the user?
Or are all these titles invisible and only show on hover?

Comment #7

joel_osc commented 19 August 2021 at 12:27

Status	File	Size
new	a11y_diff.png	224.72 KB

Hi @miro_dietiker, sorry I should have included a screenshot. Here is a screenshot of this patch along with the patch from #2834253: Missing column headings in Revisions list which is also needed for accessibility. There are changes to the static display: the first is labels on the radios, which I think also provides better usability. And the second is the tooltip (title attribute) shown on delete/revert links to differentiate them.

Comment #8

smulvih2

Canada 🍁

commented 19 August 2021 at 15:49

@joel_osc this is a great improvement! My only feedback is change "Version #xxx" with "Revision #xxx". For the buttons, something like "Delete revision #xxx" and "Edit revision #xxx".

Comment #9

joel_osc commented 19 August 2021 at 17:42

Status	File	Size
new	diff-a11y-3228798-9.patch	1.98 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	diff-a11y-3228798-4.patch	1.95 KB

Thanks @smulvih2, I totally agree. Here is a new patch with that text changed.

Comment #10

joel_osc commented 19 August 2021 at 18:18

Status	File	Size
new	diff-a11y-3228798-10.patch	3.97 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	diff-a11y-3228798-9.patch	1.98 KB

Noticed a small regression in that when the current row is selected on one column the label did not disappear along with the button on the other column. Patch updated.

Comment #11

smulvih2

Canada 🍁

commented 19 August 2021 at 18:21

Status:

Needs review

» Reviewed & tested by the community

Yep good call on the JS change, now I can't select a hidden radio with it's visible label. This looks good to me, including this patch in my project. Thanks!

Comment #12

phenaproxima

he/him

English

Massachusetts

commented 18 January 2022 at 20:52

+++ b/src/Form/RevisionOverviewForm.php
@@ -258,14 +258,14 @@ class RevisionOverviewForm extends FormBase {
+                  Url::fromRoute('node.revision_revert_translation_confirm', ['node' => $node->id(), 'node_revision' => $vid, 'langcode' => $langcode], ['attributes' => ['title' => $this->t('Revert revision @vid', ['@vid' => $vid])]]) :
+                  Url::fromRoute('node.revision_revert_confirm', ['node' => $node->id(), 'node_revision' => $vid], ['attributes' => ['title' => $this->t('Revert revision @vid', ['@vid' => $vid])]]),

Question: I heard somewhere that using the title attribute on links is not the best a11y practice, and that it would be better to embed a hidden span in the link text (which can be done with the visually-hidden class that ships with core). Example:

$links['revert'] = [
  'title' => $this->t('Revert <span class="visually-hidden">revision @vid</span>', ['@vid' => $vid]),
  // ...etc.
];

Am I correct in this understanding? I'm far from an accessibility expert, so I don't feel comfortable committing this until someone with more chops than me has signed off on this one. Maybe I can loop in someone from the core accessibility team.