Changeset 37742 for trunk/src/wp-admin/theme-install.php

Timestamp:

06/17/2016 08:46:08 PM (8 years ago)

Author:

afercia

Message:

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.

File:

• trunk/src/wp-admin/theme-install.php (modified) (3 diffs)

trunk/src/wp-admin/theme-install.php

@@ -128 +128 @@
     $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">
@@ -136 +139 @@
     </div>
 
-    <h2 class="screen-reader-text"><?php _e( 'Filter themes list' ); ?></h2>
-
-    <div class="wp-filter">
+    <h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Filter themes list' ); ?></h2>
+
+    <div class="wp-filter hide-if-no-js">
         <div class="filter-count">
             <span class="count theme-count"></span>
@@ -202 +205 @@
         </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>