Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Image dialog does not follow the dialog pattern #15295

Closed
karlgroves opened this issue Apr 30, 2019 · 4 comments

Comments

6 participants
@karlgroves
Copy link

commented Apr 30, 2019

Feature Image dialog does not follow the dialog pattern

  • Severity: High
  • Platform(s):
    • Windows - Screen Reader
    • Windows - ZoomText
    • Mac - VoiceOver
    • Android - TalkBack
    • iOS - VoiceOver
  • Components affected:
    • Media Dialog

Issue description

Users opening the "Feature Image" dialog are not told they are
entering a dialog. Keyboard focus is trapped, however screen reader
users are able to go beyond the last items of the dialog without
realising they have left it.

Keyboard users who find their focus cycling around the dialog get a Tab
stop with no visible focus. This is the dialog itself, which can receive
keyboard focus while having no visible focus state.

The triggering "Set Featured Image" button does not express an
expanded or collapsed state, which would not matter if users could not
reach the button when the modal was open; however, they can.

Lack of an explicit role for modal dialogs may be confusing for
assistive technology users, since they may not realise they're inside a
dialog, and that consequently the keyboard interactions may be different
from the rest of the page. Lack of an explicit label for dialogs may be
confusing for assistive technology users, since they won't have an
immediate sense of what the dialog is for.

Issue Code
    <button type="button" class="components-button editor-post-featured-image__toggle">Set featured image</button>


    ...


    <div tabindex="0" class="media-modal wp-core-ui">


        <button type="button" class="...">...Close media panel...</button>


        <div class="media-modal-content">


            ...


            <div class="media-frame-title">


                <h1>Featured Image<span class="dashicons dashicons-arrow-down"></span></h1>


            </div>


            ...


        </div>


    </div>

Remediation Guidance

Give the modal a role of dialog and set "aria-modal=true".
Additionally, set aria-hidden="true" on the element which wraps
the rest of the page, to prevent older browsers or assistive
technologies that don't support aria-modal from accessing the rest
of the page while the modal is open.

Use aria-labelledby and an id on the modal heading to name the
modal.

Change the tabindex to -1 so that it can be focused via
JavaScript without being in the Tab order. The exception to this advice
is if having the modal in the Tab order is necessary so that keyboard
users can scroll content inside it; however in existing cases,
scrollable areas are separate parts of the modal. But if a container
must receive focus in order to allow keyboard users to scroll the
content, then the container must visibly show focus.

Recommended Code
    <div id="wpwrap" aria-hidden="true">...</div>





    <div role="dialog" aria-modal="true" aria-labelledby="media-modal-title" tabindex="-1" class="media-modal wp-core-ui">


        <button type="button" class="...">...Close media panel...</button>


        <div class="media-modal-content">


            ...


            <div class="media-frame-title">


                <h1 id="media-modal-title">Featured Image<span class="dashicons dashicons-arrow-down"></span></h1>


            </div>


            ...


        </div>


    </div>

Relevant standards

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-42 in Tenon's report

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 4, 2019

As the media modals aren't part of Gutenberg, this issue should be moved to Trac.

And yes, unfortunately the Media Views are one of the most inaccessible parts in WordPress. Several long standing tickets on Trac.

@melchoyce

This comment has been minimized.

Copy link
Contributor

commented May 5, 2019

Full report screenshot:

image

@melchoyce melchoyce moved this from To do to Move to Trac in Accessibility Audit May 5, 2019

@anevins12

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

Closing as moved to Trac.

@afercia afercia closed this May 6, 2019

Accessibility Audit automation moved this from Move to Trac to Closed May 6, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.