Accessibility: Improve the Theme Details modal accessibility.

- sets the modal content to `role="document"` to make screen readers switch back to browse mode
- standardizes the Themes screen and Customizer modals interaction
- Themes screen modal: sets initial focus on the modal overlay instead of the primary button, avoiding to "skip" content for keyboard and screen reader users

Fixes #42055.


git-svn-id: https://develop.svn.wordpress.org/trunk@41658 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2017-10-01 13:47:29 +00:00
parent 625773bd8b
commit 7a414342df
3 changed files with 8 additions and 8 deletions
+2 -2
View File
@@ -301,7 +301,7 @@ foreach ( $themes as $theme ) :
<?php endforeach; ?>
</div>
</div>
<div class="theme-overlay"></div>
<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
<p class="no-themes"><?php _e( 'No themes found. Try a different search query.' ); ?></p>
@@ -431,7 +431,7 @@ $can_install = current_user_can( 'install_themes' );
<script id="tmpl-theme-single" type="text/template">
<div class="theme-backdrop"></div>
<div class="theme-wrap wp-clearfix">
<div class="theme-wrap wp-clearfix" role="document">
<div class="theme-header">
<button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
<button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>