[wp-trac] [WordPress Trac] #47147: Status message not exposed to assistive technologies

[WordPress Trac]

#47147: Status message not exposed to assistive technologies
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  afercia
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.5
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  needs-patch                                    |  accessibility
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:  has-screenshots wpcampus-report has-patch needs-refresh =>
     has-screenshots wpcampus-report needs-patch


Comment:

 Testing a bit the current approach, I'm not sure we can use the
 `role="alert"` pattern. Due to the way the image editor works (which is a
 bit inconsistent and shows its age) the alert is sometimes announced and
 sometimes not.

 For example, testing with Firefox and NVDA:
 - the alert is announced when saving "normal" actions
 - it is ''not'' announced when scaling or restoring an image or in any
 other case where the AJAX response rebuilds the whole image editor HTML

 Screen readers are able to announce an alert when it's "injected" in the
 DOM. But when there's a large DOM update and the updated region contains
 an alert, it seems they're not able to understand what is going on. The
 DOM update is just too large. I think a more solid approach would be using
 `wp.a11y.speak()` instead.

 Moreover, as it's pretty common in the legacy WordPress codebase, most of
 the involved functions "do something" but then also return a value. For
 example:
 - `wp_save_image()` processes the image saving and then returns an object
 with some image data and the error / success message
 - `wp_restore_image`restores the image data and then then returns the
 error / success message
 - `wp_image_editor()` generates the whole Image Editor markup, which is
 returned by te main AJAX action `image-editor`

 Additionally, looking at this switch statement in the `image-editor` AJAX
 action: https://github.com/WordPress/wordpress-
 develop/blob/25133cf3f1bc2ac3c2294a291396ebddb80b0e98/src/wp-
 admin/includes/ajax-actions.php#L2603-L2618

 - when saving: the `wp_save_image()` message object is passed as JSON
 encoded response
 - when scaling: the `wp_save_image()` message object is ''not'' passed as
 JSON encoded response, instead it's passed to `wp_image_editor()` which
 returns a response containing the whole HTML blob
 - when restoring: the `wp_restore_image()` message object is ''not''
 passed as JSON encoded response, instead it's passed to
 `wp_image_editor()` which returns a response containing the whole HTML
 blob

 Basically the `image-editor` AJAX action response is different depending
 on the cases. Sometimes it contains a message that could be used on the JS
 side by `wp.a11y.speak()`. Sometimes it just returns the HTML blob.

 In order to use `wp.a11y.speak()` reliably, the response should always
 return an object that contains ''also'' a message. This would require some
 refactoring of the (pretty old) code responsible for the various
 responses. Will attempt a patch.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47147#comment:35>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform