WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 6 weeks ago

#47147 assigned defect (bug)

Status message not exposed to assistive technologies

Reported by: anevins Owned by: ryanshoover
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots wpcampus-report has-patch early
Focuses: ui, accessibility Cc:
PR Number:

Description (last modified by afercia)

Moved from the WPCampus accessibility report issues on GitHub, see: https://github.com/WordPress/gutenberg/issues/15293

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

Issue description
Within the Edit Media page, when activating the "Restore Image"
button, a message is shown above the image while the Restore button
itself disappears.

Since the button would have been focused at the time when activated by
keyboard, this causes the keyboard focus position to be lost and reset
to the top of the page.

The message itself is also not announced by screen readers, and may not
be visible to screen magnification users if it appears outside their
current view.

Issue Code

    <div class="imgedit-panel-content wp-clearfix">


        <div class="error">


            <p>Cannot save image metadata.</p>


        </div>


        <div class="imgedit-menu wp-clearfix">


            ...


        </div>


    </div>





    ...





    <div class="imgedit-panel-content wp-clearfix">


        <div class="updated">


            <p>Image restored successfully.</p>


        </div>


        <div class="imgedit-menu wp-clearfix">


            ...


        </div>


    </div>

Remediation Guidance
Add tabindex="-1" to the message, and then programatically focus
it when it appears. This will maintain a logical focus position, and
ensure that all visual users will see it, while assistive technologies
announce it.

Adding the alert role will also help to convey to screen readers
that this is an alert-type message.

Recommended Code

    <div class="imgedit-panel-content wp-clearfix">


        <div class="error" tabindex="-1" role="alert">


            <p>Cannot save image metadata.</p>


        </div>


        <div class="imgedit-menu wp-clearfix">


            ...


        </div>


    </div>





    ...





    <div class="imgedit-panel-content wp-clearfix">


        <div class="updated" tabindex="-1" role="alert">


            <p>Image restored successfully.</p>


        </div>


        <div class="imgedit-menu wp-clearfix">


            ...


        </div>


    </div>

Relevant standards

  • 2.1.1 Keyboard (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-73 in Tenon's report

Attachments (2)

57186829-bc9dfc00-6e9a-11e9-99be-b0975c99aea6.png (448.6 KB) - added by anevins 7 months ago.
47147.1.diff (2.3 KB) - added by ryanshoover 2 months ago.
Patch to address the issue

Download all attachments as: .zip

Change History (26)

#1 @afercia
7 months ago

  • Description modified (diff)

#2 @afercia
7 months ago

Worth noting this applies only to notifications that are dynamically added in a page. Instead, the standard "admin notices" rendered on page load, wouldn't benefit from a role=alert or role=status. See #47111 and #46995.

#3 @afercia
7 months ago

  • Milestone changed from Awaiting Review to 5.3

#4 @afercia
6 months ago

Related: #47111.

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


5 months ago

#6 @anevins
5 months ago

@afercia it seems that we're talking about 2 things;
1) Moving the keyboard focus from the "Restore Image" button which disappears visually;
2) Putting alert roles or status on the notifications

If there's a way to tie into the functionality that hides the submit button, that would be easiest for the focus handling bit

jQuery('.submit').on('click', function() {
   $(this).hide();
   $('.notification').attr('tabindex', '-1').focus();
});

#7 @afercia
5 months ago

@anevins it's indeed two issues.

Currently, when pressing "Restore Image", focus is moved to the first focusable element within the image editor container which is... the "Scale image" help button:

http://cldup.com/w-mQVVimC3.png

Worth reminding the media editor is used also within the media modal:

http://cldup.com/NC6NLEkK66.png

Not ideal, can be certainly changed but the image editor code is pretty old and moving focus to the first focusable element seemed a good idea. In the case of notices appearing in the page, it should behave as suggested above. However, I'd tend to think we should favor a generalic, reusable, solution rather than ad-hoc implementations.

Relevant code is in src/js/_enqueues/lib/image-edit.js.

The second issue are the status notices that appear on the page. Instead of using a role=alert, I'd recommend to use wp.a11y.speak() which is the core implementation of ARIA live regions. Passing the assertive parameter to speak() would produce the equivalent announcement of an ARIA alert.

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


3 months ago

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


3 months ago

@ryanshoover
2 months ago

Patch to address the issue

#10 @ryanshoover
2 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

@antpb I just uploaded a patch that will handle the core issue. Screen readers now announce all of the "status updates" that can come from editing a piece of media.

I didn't implement the focus aspect, as that collides with a focus set for [imgLoaded](https://github.com/WordPress/WordPress/blob/master/wp-admin/js/image-edit.js#L611)

Can you take a look and hopefully we can get this in before the beta 2 for 5.3?

This ticket was mentioned in Slack in #core-media by mike. View the logs.


2 months ago

#12 @mikeschroder
2 months ago

@ryanshoover Thanks so much for the patch!

This ticket came up in triage. Would you like to be listed as the owner?

#13 @afercia
2 months ago

  • Owner set to ryanshoover
  • Status changed from new to assigned

#14 @ryanshoover
2 months ago

@mikeschroder Sure thing. I can own this. Doesn't look like I can assign myself :)

#15 @afercia
2 months ago

Assigning to @ryanshoover :)

#16 @ryanshoover
8 weeks ago

@joemcgill @antpb Just double checking that the media team can look at this patch in time for 5.3 :)

#17 @antpb
8 weeks ago

I think this looks great @ryanshoover ! Thank you so much! Patch applied clean and I'm running tests now. Will add commit and get a second commiter to review after I test.

#18 @antpb
8 weeks ago

  • Keywords commit added; needs-testing removed

#19 @antpb
8 weeks ago

  • Keywords commit removed

Ah removing commit, we may need to factor in the suggestion here: https://core.trac.wordpress.org/ticket/47147#comment:7

"
Instead of using a role=alert, I'd recommend to use wp.a11y.speak() which is the core implementation of ARIA live regions. Passing the assertive parameter to speak() would produce the equivalent announcement of an ARIA alert.
"

Last edited 8 weeks ago by antpb (previous) (diff)

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


7 weeks ago

#23 @audrasjb
6 weeks ago

  • Keywords early added
  • Milestone changed from 5.3 to 5.4

Hi,
Thanks for the work done on this ticket.
Unfortunately, we are now at Beta 3 in the release cycle. I'm moving this ticket to 5.4 early milestone.
Feel free to discuss it if you feel this ticket could land before 5.3 Release Candidate 1.

#24 @mikeschroder
6 weeks ago

Just a quick note that I think this is totally fine to land in 5.3 still, if someone has time to work on it.

Note: See TracTickets for help on using tickets.