WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.51k stars 4.2k forks source link

Publish date button: add a speak message (was: "remove aria-live and use a `speak()` message instead") #15398

Open afercia opened 5 years ago

afercia commented 5 years ago

Noticed while testing https://github.com/WordPress/gutenberg/pull/15381

The publish button has an aria-live="polite" attribute that was introduced to make the button text changes announced by screen readers.

Aside: Worth noting this button, together with the Visibility button, has many accessibility issues and there's a long standing issue about them, see #470.

While the intent was good, the actual behavior is not ideal. Using only aria-live="polite" without aria-atomic and aria-relevant doesn't work as expected.

By default, only changes within an aria-live region get announced. That means if the aria-live region initial content is, let's say:

Apr 20, 2019 12:54 pm

and then in the calendar I change the date to April 19, the new string will be:

Apr 19, 2019 12:54 pm

Actually, the only part that is changed is 19 and that's exactly what screen readers will announce. Screenshot testing with Firefox and NVDA:

date aria-polite

(Note: for the untranslated date values there's already #15348)

This is certainly not desirable. Instead of using aria-live on the button itself, a better option would be to use speak() with a meaningful message. Something like:

Publish date set to Apr 19, 2019 12:54 pm

This would also decouple the announcement feature from future changes to the UI markup, make things more maintainable and consistent.

youknowriad commented 4 years ago

I don't think the publish button iis usinig the aria-live anymore.

afercia commented 4 years ago

Right, aria-live was removed in https://github.com/WordPress/gutenberg/pull/15381

However, there's still the need for an audible message to confirm a new date has been set and a speak() message should be used. See https://github.com/WordPress/gutenberg/issues/15292

Reopening and updating the title to better clarify which "publish" button this issue refers to.