Undo and Redo functions do not communicate changes

[karlgroves]

Undo and Redo functions do not communicate changes

• Severity: Medium
• Affected Populations:
  • Blind
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • Windows - Screen Reader
  • Windows - ZoomText
  • Mac - VoiceOver
  • Android - TalkBack
  • iOS - VoiceOver
• Components affected:
  • Editor Top Bar

Issue description

When users navigate to the Editor Top Bar after writing some content,
and use the "Undo" or "Redo" buttons, the only way to know what
changed or whether it was successful is to be able to see the page
content while activating it.

For a screen reader user, activating the control with Enter communicates
nothing, while using Space merely repeats the Space key. Some screen
readers announce when the button's state goes from enabled to disabled,
while others don't.

Low-vision users who are either zoomed-in or using screen magnification
cannot see changes caused by Undo and Redo unless their viewable area
includes the content that has changed; in this case, the only apparent
state is when they've reached the end of the Undo or Redo buffer,
because the buttons change to the disabled colors.

Remediation Guidance

One solution could be an aria-live region which describes the
change. For example, if a block creation was undone, the live region
text might be "Block deleted."

Another idea, which would assist low-vision and assistive technology
users, would be to add a small number next to the button (similar to a
notifications-icon number) showing the number of Undo or Redo actions
which are left in the buffer; this number could then be removed when the
button is disabled. A screen reader user can then have the live region
state how many actions are remaining, and changes to this value would
then communicate that an Undo or Redo has occurred (to confirm, for
example, that the action has only happened once, rather than multiple
times due to holding the Space bar down for too long).

Relevant standards

• 1.3.1 Info and Relationships
  (Level A)
• 1.3.3 Sensory Characteristics
  (Level A)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-10 in Tenon's report

[melchoyce]

Screenshot from full report:

[afercia]

See related #15292 and comment #15292 (comment)

[kjellr]

👋 We discussed this ticket in #design triage today.

As a group, the design team would lean more towards recommending the ARIA live option for remedy in this case — it seems a little uncommon to display the undo/redo buffer alongside the undo/redo icons.

[afercia]

A speak() message would certainly help screen reader users.

However, it wouldn't help users who use screen magnifiers. These users only see one small portion of the page at a time. Clicking Undo or Redo won't give them any clue about what happens.

To get a better idea, on a Mac you can use the Zoom functionality this way:

• go to System Preferences > Accessibility > Zoom
• select "Use keyboard shortcuts to zoom"
• select "Zoom style: Full screen"
• use Option-Command-8 to toggle the screen magnifier

In the screenshot below, that's the entire screen users see: in this scenario I'd definitely second the need for some visual feedback close to the buttons. The number of steps seems a reasonable option.

[kjellr]

@afercia — for users in that scenario, what sort of visual feedback would you like to see there?

It seems to me that the 'buffer' suggestion from the original ticket wouldn't actually help in this specific scenario. More useful feedback might be better delivered via a temporary snackbar notification or something. I'm not sure about technical feasibility for these, but it would be cool to see messages like "Restored 3 deleted blocks", etc.

[afercia]

@kjellr the idea suggested by @karlgroves makes sense to me and I'd tend to think it's worth exploring:

add a small number next to the button (similar to a notifications-icon number)

I didn't know anything about snackbar notifications until one hour ago, when I discovered the related PR by coincidence. I've commented on #15282 (comment) and I'd like to refrain from further comments for now 🙂

[kjellr]

Thanks, @afercia. For clarity's sake: that small number wouldn't necessarily help convey what has changed, right? My understanding is that it would only convey that you can click the button X number of times in order to undo/redo changes.

Are there other applications/websites that handle this well? It'd be helpful to have some great references.

[afercia]

@kjellr correct, it wouldn't convey the what, but at least it would give some feedback that pressing the buttons actually did something. Reading again the proposed idea above:

changes to this value would then communicate that an Undo or Redo has occurred (to confirm, for
example, that the action has only happened once, rather than multiple times due to holding the Space bar down for too long).

[kjellr]

it wouldn't convey the what, but at least it would give some feedback that pressing the buttons actually did something.

Thanks, that makes a lot of sense. I can definitely relate to pressing cmd-z and not being sure if anything's changed. Not just in Gutenberg, but across most applications. I'd still love to see some good references for this if anyone has any. There's got to be someone who's doing this well...

[ellatrix]

Related: #22799