Make WordPress Core

Changeset 32844


Ignore:
Timestamp:
06/18/2015 04:35:12 PM (8 years ago)
Author:
obenland
Message:

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.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r32796 r32844  
    14441444}
    14451445
    1446 #screen-meta-links a {
    1447     padding: 3px 6px 3px 16px;
    1448 }
    1449 
    1450 #screen-meta-links a:focus {
    1451     outline: none;
    1452 }
    1453 
    14541446/* screen options and help tabs revert */
    14551447#screen-meta {
     
    14811473}
    14821474
    1483 #screen-meta-links a {
     1475#screen-meta-links .show-settings {
     1476    border: 0;
     1477    background: none;
     1478    border-radius: 0;
    14841479    color: #777;
    1485 }
    1486 
    1487 #screen-meta-links a:hover,
    1488 #screen-meta-links a:active,
    1489 #screen-meta-links a:focus {
     1480    line-height: 1.7;
     1481    padding: 3px 6px 3px 16px;
     1482}
     1483
     1484#screen-meta-links .show-settings:hover,
     1485#screen-meta-links .show-settings:active,
     1486#screen-meta-links .show-settings:focus {
    14901487    color: #32373c;
    14911488}
    14921489
    1493 #screen-meta-links a.show-settings {
    1494     display: block;
    1495     font-size: 13px;
    1496     height: 22px;
    1497     line-height: 22px;
    1498     text-decoration: none;
    1499     z-index: 1;
    1500 }
    1501 
    1502 #screen-meta-links a:after {
     1490#screen-meta-links .show-settings:after {
    15031491    right: 0;
    15041492    content: '\f140';
     
    15161504}
    15171505
    1518 #screen-meta-links a.screen-meta-active:after {
     1506#screen-meta-links .screen-meta-active:after {
    15191507    content: '\f142';
    15201508}
    15211509
    1522 #screen-meta-links a.show-settings:hover {
    1523     text-decoration: none;
    1524 }
    15251510/* end screen options and help tabs */
    15261511
  • trunk/src/wp-admin/includes/screen.php

    r32707 r32844  
    975975        <?php if ( $this->get_help_tabs() ) : ?>
    976976            <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
    977             <a href="#contextual-help-wrap" id="contextual-help-link" class="show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></a>
     977            <button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>
    978978            </div>
    979979        <?php endif;
    980980        if ( $this->show_screen_options() ) : ?>
    981981            <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
    982             <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>
     982            <button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>
    983983            </div>
    984984        <?php endif; ?>
  • trunk/src/wp-admin/js/common.js

    r32751 r32844  
    106106    init: function() {
    107107        this.element = $('#screen-meta');
    108         this.toggles = $('.screen-meta-toggle a');
     108        this.toggles = $( '#screen-meta-links' ).find( '.show-settings' );
    109109        this.page    = $('#wpcontent');
    110110
     
    112112    },
    113113
    114     toggleEvent: function( e ) {
    115         var panel = $( this.href.replace(/.+#/, '#') );
    116         e.preventDefault();
     114    toggleEvent: function() {
     115        var panel = $( '#' + $( this ).attr( 'aria-controls' ) );
    117116
    118117        if ( !panel.length )
     
    125124    },
    126125
    127     open: function( panel, link ) {
    128 
    129         $('.screen-meta-toggle').not( link.parent() ).css('visibility', 'hidden');
     126    open: function( panel, button ) {
     127
     128        $( '#screen-meta-links' ).find( '.screen-meta-toggle' ).not( button.parent() ).css( 'visibility', 'hidden' );
    130129
    131130        panel.parent().show();
    132131        panel.slideDown( 'fast', function() {
    133132            panel.focus();
    134             link.addClass('screen-meta-active').attr('aria-expanded', true);
     133            button.addClass( 'screen-meta-active' ).attr( 'aria-expanded', true );
    135134        });
    136135
     
    138137    },
    139138
    140     close: function( panel, link ) {
     139    close: function( panel, button ) {
    141140        panel.slideUp( 'fast', function() {
    142             link.removeClass('screen-meta-active').attr('aria-expanded', false);
     141            button.removeClass( 'screen-meta-active' ).attr( 'aria-expanded', false );
    143142            $('.screen-meta-toggle').css('visibility', '');
    144143            panel.parent().hide();
Note: See TracChangeset for help on using the changeset viewer.