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. Built from https://develop.svn.wordpress.org/trunk@37742 git-svn-id: http://core.svn.wordpress.org/trunk@37707 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
accf240d37
commit
dd5bc0d28e
|
|
@ -601,6 +601,9 @@ code {
|
|||
text-shadow: none;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: normal; /* IE8-IE11 need this for buttons */
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wrap .add-new-h2:hover, /* deprecated */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -601,6 +601,9 @@ code {
|
|||
text-shadow: none;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: normal; /* IE8-IE11 need this for buttons */
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wrap .add-new-h2:hover, /* deprecated */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1039,7 +1039,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
|
|||
box-sizing: border-box;
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 50px 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -1066,13 +1066,9 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
|
|||
font-size: 18px;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
padding: 40px 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
body.show-upload-theme .upload-theme + .wp-filter,
|
||||
body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p.no-themes {
|
||||
clear: both;
|
||||
|
|
@ -1085,14 +1081,10 @@ p.no-themes {
|
|||
display: none;
|
||||
}
|
||||
|
||||
body.no-results p.no-themes {
|
||||
.no-results p.no-themes {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.show-upload-theme p.no-themes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-install-php .add-new-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1039,7 +1039,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
|
|||
box-sizing: border-box;
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 50px 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -1066,13 +1066,9 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
|
|||
font-size: 18px;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
padding: 40px 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
body.show-upload-theme .upload-theme + .wp-filter,
|
||||
body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p.no-themes {
|
||||
clear: both;
|
||||
|
|
@ -1085,14 +1081,10 @@ p.no-themes {
|
|||
display: none;
|
||||
}
|
||||
|
||||
body.no-results p.no-themes {
|
||||
.no-results p.no-themes {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.show-upload-theme p.no-themes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-install-php .add-new-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1745,23 +1745,18 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
searchContainer: $( '.wp-filter .search-form' ),
|
||||
|
||||
/*
|
||||
* When a user presses the "Upload Theme" button, show the upload form in place.
|
||||
* @todo consider to abstract this in a generic, reusable, utility, see plugin-install.js
|
||||
* When users press the "Upload Theme" button, show the upload form in place.
|
||||
*/
|
||||
uploader: function() {
|
||||
var uploadViewToggle = $( '.upload-view-toggle' ),
|
||||
$body = $( document.body );
|
||||
|
||||
uploadViewToggle
|
||||
.attr({
|
||||
role: 'button',
|
||||
'aria-expanded': 'false'
|
||||
})
|
||||
.on( 'click', function( event ) {
|
||||
event.preventDefault();
|
||||
$body.toggleClass( 'show-upload-view' );
|
||||
uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
|
||||
});
|
||||
uploadViewToggle.on( 'click', function() {
|
||||
// Toggle the upload view.
|
||||
$body.toggleClass( 'show-upload-view' );
|
||||
// Toggle the `aria-expanded` button attribute.
|
||||
uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
|
||||
});
|
||||
},
|
||||
|
||||
// Toggle the full filters navigation
|
||||
|
|
@ -1815,7 +1810,6 @@ themes.InstallerRouter = Backbone.Router.extend({
|
|||
routes: {
|
||||
'theme-install.php?theme=:slug': 'preview',
|
||||
'theme-install.php?browse=:sort': 'sort',
|
||||
'theme-install.php?upload': 'upload',
|
||||
'theme-install.php?search=:query': 'search',
|
||||
'theme-install.php': 'sort'
|
||||
},
|
||||
|
|
@ -1897,11 +1891,6 @@ themes.RunInstaller = {
|
|||
self.view.trigger( 'theme:close' );
|
||||
});
|
||||
|
||||
// Support the `upload` route by going straight to upload section
|
||||
themes.router.on( 'route:upload', function() {
|
||||
$( 'a.upload' ).trigger( 'click' );
|
||||
});
|
||||
|
||||
// The `search` route event. The router populates the input field.
|
||||
themes.router.on( 'route:search', function() {
|
||||
$( '.wp-filter-search' ).focus().trigger( 'keyup' );
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.6-alpha-37741';
|
||||
$wp_version = '4.6-alpha-37742';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue