Accessibility: Theme Installer, make the "Upload Theme" button... a button.

UI controls that "do something" on a page shouldn't be links. This link behaves
like a toggle to expand the uploader panel and should be a `button` element with
an aria-expanded attribute. Also:

- improves consistency with the Plugin uploader
- keeps the themes list visible when the uploader is open
- displays a notice when JavaScript is off
- adds some `hide-if-no-js` CSS classes
- removes the `themes.router.navigate()` "upload" route: seems unnecessary and breaks history

Fixes #35457.

git-svn-id: https://develop.svn.wordpress.org/trunk@37742 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2016-06-17 20:46:08 +00:00
parent faf7576562
commit 090ecc34f9
4 changed files with 20 additions and 33 deletions

View File

@@ -127,17 +127,20 @@ include(ABSPATH . 'wp-admin/admin-header.php');
*/
$tabs = apply_filters( 'install_themes_tabs', array( 'upload' => __( 'Upload Theme' ) ) );
if ( ! empty( $tabs['upload'] ) && current_user_can( 'upload_themes' ) ) {
echo ' <a href="#" class="upload-view-toggle page-title-action">' . __( 'Upload Theme' ) . '</a>';
echo ' <button type="button" class="upload-view-toggle page-title-action hide-if-no-js" aria-expanded="false">' . __( 'Upload Theme' ) . '</button>';
}
?></h1>
<div class="error hide-if-js">
<p><?php _e( 'The Theme Installer screen requires JavaScript.' ); ?></p>
</div>
<div class="upload-theme">
<?php install_themes_upload(); ?>
</div>
<h2 class="screen-reader-text"><?php _e( 'Filter themes list' ); ?></h2>
<h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Filter themes list' ); ?></h2>
<div class="wp-filter">
<div class="wp-filter hide-if-no-js">
<div class="filter-count">
<span class="count theme-count"></span>
</div>
@@ -201,7 +204,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
</div>
</div>
</div>
<h2 class="screen-reader-text"><?php _e( 'Themes list' ); ?></h2>
<h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Themes list' ); ?></h2>
<div class="theme-browser content-filterable"></div>
<div class="theme-install-overlay wp-full-overlay expanded"></div>