Semanticize Help and Screen Options toggle.

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

Props afercia.
Fixes #32494.


Built from https://develop.svn.wordpress.org/trunk@32844


git-svn-id: http://core.svn.wordpress.org/trunk@32815 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Konstantin Obenland 2015-06-18 16:36:25 +00:00
parent 81df9bffc5
commit c1a9c4b7b8
8 changed files with 36 additions and 67 deletions

View File

@ -1443,14 +1443,6 @@ form.upgrade .hint {
margin: 0 0 0 20px;
}
#screen-meta-links a {
padding: 3px 16px 3px 6px;
}
#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 16px 3px 6px;
}
#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 {
left: 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 {

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 {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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>

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();
});

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-alpha-32843';
$wp_version = '4.3-alpha-32844';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.