[wp-trac] [WordPress Trac] #47147: Status message not exposed to assistive technologies (in the Image Editor)

[WordPress Trac]

#47147: Status message not exposed to assistive technologies (in the Image Editor)
-------------------------------------------------+-------------------------
 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,
  has-patch needs-dev-note                       |  accessibility
-------------------------------------------------+-------------------------
Changes (by afercia):

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


Comment:

 [attachment:"47147.diff"] takes a broader approach and does the following:

 - changes the response format of `wp_ajax_image_editor()` so that it is
 possible to get the messages and pass them to `wp_send_json_error()` and
 `wp_send_json_success()`
 - in order to do so, it uses output buffering to split the HTML from the
 messages
 - I'd like the part above to be reviewed by the Media component
 maintainers or alternatively from the release Core Tech, /Cc @azaozz
 @SergeyBiryukov

 Additionally:
 - uses `wp.a11y.speak()` to announce messages to assistive technology
 - announce existing messages for the `scale` and `restore` actions
 - uses wp-i18n and entirely removes `imageEditL10n`
 - improves focus management: focus is moved to the admin alert notices, if
 any, or to the first tabbable element within the Image editor


 Hint: To test the accessibility part of the patch and see when focus is
 set to the admin alert notices, a temporary style for focus may help. You
 can add somewhere in some CSS used on the page something along these
 lines:
 `:focus { outline: 2px solid red !important; }`

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