vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Semanticize Help and Screen Options toggle.

Browse Source 
Links used as UI controls that are not real links but act as buttons, should be buttons.

Props afercia.
Fixes #32494.



git-svn-id: https://develop.svn.wordpress.org/trunk@32844 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Konstantin Obenland
2015-06-18 16:35:12 +00:00
parent 2ae17175b2
commit 9bf79ed862
3 changed files with 21 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/wp-admin/css/common.css
View File

@@ -1443,14 +1443,6 @@ form.upgrade .hint {
margin: 0 20px 0 0;
}
#screen-meta-links a {
padding: 3px 6px 3px 16px;
}
#screen-meta-links a:focus {
outline: none;
}
/* screen options and help tabs revert */
#screen-meta {
display: none;
@@ -1480,26 +1472,22 @@ form.upgrade .hint {
top: 0;
}
#screen-meta-links a {
#screen-meta-links .show-settings {
border: 0;
background: none;
border-radius: 0;
color: #777;
line-height: 1.7;
padding: 3px 6px 3px 16px;
}
#screen-meta-links a:hover,
#screen-meta-links a:active,
#screen-meta-links a:focus {
#screen-meta-links .show-settings:hover,
#screen-meta-links .show-settings:active,
#screen-meta-links .show-settings:focus {
color: #32373c;
}
#screen-meta-links a.show-settings {
display: block;
font-size: 13px;
height: 22px;
line-height: 22px;
text-decoration: none;
z-index: 1;
}
#screen-meta-links a:after {
#screen-meta-links .show-settings:after {
right: 0;
content: '\f140';
font: normal 20px/1 'dashicons';
@@ -1515,13 +1503,10 @@ form.upgrade .hint {
color: #b4b9be;
}
#screen-meta-links a.screen-meta-active:after {
#screen-meta-links .screen-meta-active:after {
content: '\f142';
}
#screen-meta-links a.show-settings:hover {
text-decoration: none;
}
/* end screen options and help tabs */
.toggle-arrow {

4
src/wp-admin/includes/screen.php
View File

@@ -974,12 +974,12 @@ final class WP_Screen {
<div id="screen-meta-links">
<?php if ( $this->get_help_tabs() ) : ?>
<div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
<a href="#contextual-help-wrap" id="contextual-help-link" class="show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></a>
<button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>
</div>
<?php endif;
if ( $this->show_screen_options() ) : ?>
<div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
<a href="#screen-options-wrap" id="show-settings-link" class="show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></a>
<button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>
</div>
<?php endif; ?>
</div>

17
src/wp-admin/js/common.js
View File

@@ -105,15 +105,14 @@ screenMeta = {
init: function() {
this.element = $('#screen-meta');
this.toggles = $('.screen-meta-toggle a');
this.toggles = $( '#screen-meta-links' ).find( '.show-settings' );
this.page = $('#wpcontent');
this.toggles.click( this.toggleEvent );
},
toggleEvent: function( e ) {
var panel = $( this.href.replace(/.+#/, '#') );
e.preventDefault();
toggleEvent: function() {
var panel = $( '#' + $( this ).attr( 'aria-controls' ) );
if ( !panel.length )
return;
@@ -124,22 +123,22 @@ screenMeta = {
screenMeta.open( panel, $(this) );
},
open: function( panel, link ) {
open: function( panel, button ) {
$('.screen-meta-toggle').not( link.parent() ).css('visibility', 'hidden');
$( '#screen-meta-links' ).find( '.screen-meta-toggle' ).not( button.parent() ).css( 'visibility', 'hidden' );
panel.parent().show();
panel.slideDown( 'fast', function() {
panel.focus();
link.addClass('screen-meta-active').attr('aria-expanded', true);
button.addClass( 'screen-meta-active' ).attr( 'aria-expanded', true );
});
$( document ).trigger( 'screen:options:open' );
},
close: function( panel, link ) {
close: function( panel, button ) {
panel.slideUp( 'fast', function() {
link.removeClass('screen-meta-active').attr('aria-expanded', false);
button.removeClass( 'screen-meta-active' ).attr( 'aria-expanded', false );
$('.screen-meta-toggle').css('visibility', '');
panel.parent().hide();
});