[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:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch          |     Focuses:  ui,
  wpcampus-report                                |  accessibility
-------------------------------------------------+-------------------------
Description changed by afercia:

Old description:

> * **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

New description:

 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

--

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