Aligning Blocks: Need Confirmation That Block is Aligned

[donalirl]

Describe the bug When aligning blocks in the block editor using a screen reader, there is no verbal confirmation that the block aligned successfully. A visually-impaired user needs verbal feedback to know that the block contents are aligned.

To reproduce Steps to reproduce the behavior:

1. Open up any page or post and insert a block that has alignment options in the toolbar (such as paragraph or audio)
2. Using a screen reader, navigate to the block toolbar and select align left, right or center
3. Observe the lack of clear confirmation

Expected behavior I expected verbal feedback along the lines of "block aligned center".

Screenshots

Screen recording: https://d.pr/v/PwvxqC (this shows WordPress.com but please note I can recreate on a self-hosted installation as well.

Editor version (please complete the following information):

• WordPress version: 5.4
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Default

Desktop (please complete the following information): Chrome (latest), Windows 10 Chrome (latest) on android Safari (latest) on iPhone

[enriquesanchez]

I agree the change could be communicated better.

After I change the text alignment, I get "Default has been selected". I'm not sure why this is being announced.

@afercia @Ryokuhi I'd love to hear what you think.

[afercia]

Turns out that string is used for an audible message in the downshift package, which is used for the custom select component. I can't reproduce it on my local installation though.

This function comes from downshift:

/**
 * Returns a message to be added to aria-live region when item is selected.
 *
 * @param {Object} selectionParameters Parameters required to build the message.
 * @returns {string} The a11y message.
 */

function getA11ySelectionMessage(selectionParameters) {
  var selectedItem = selectionParameters.selectedItem,
      itemToStringLocal = selectionParameters.itemToString;
  return itemToStringLocal(selectedItem) + " has been selected.";
}

If someone else can reproduce this consistently, then it's definitely a wrong behavior.

[afercia]

One of the places where downshift is used, is the font size picker. Downshift implements its own aria-live region. Each time a font size is selected, a message is sent to this aria-live region:

I have no idea why this gets announced when aligning text though.

Important: Also, I see at least two serious issues with the downshift aria-live region:

• The messages string appear to be hardcoded in English: they're not translatable. I'd argue this should have been evaluated before considering to use downshift. Alas, it's a bit too late now and non-English users are getting audible messages in English. I'm not sure if these strings can be overridden with translated strings but nothing has been done in that regard.
• The aria-live region is added to the DOM only after the font size picker is opened for the first time. This is wrong, as live regions needs to be in the DOM at page load to allow screen readers to monitor changes within them reliably.

@enriquesanchez would you mind creating a new issue please, when you have a chance?

[inaikem]

@afercia, @enriquesanchez 👋 Just checking in to see if any progress has been made since the last comment here. Do you know if a new issue was created? Thanks!