Changeset 32844

Timestamp:

06/18/2015 04:35:12 PM (10 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:

• css/common.css (modified) (3 diffs)
• includes/screen.php (modified) (1 diff)
• js/common.js (modified) (4 diffs)

trunk/src/wp-admin/css/common.css

@@ -1444 +1444 @@
 }
 
-#screen-meta-links a {
-    padding: 3px 6px 3px 16px;
-}
-
-#screen-meta-links a:focus {
-    outline: none;
-}
-
 /* screen options and help tabs revert */
 #screen-meta {
@@ -1481 +1473 @@
 }
 
-#screen-meta-links a {
+#screen-meta-links .show-settings {
+    border: 0;
+    background: none;
+    border-radius: 0;
     color: #777;
-}
-
-#screen-meta-links a:hover,
-#screen-meta-links a:active,
-#screen-meta-links a:focus {
+    line-height: 1.7;
+    padding: 3px 6px 3px 16px;
+}
+
+#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';
@@ -1516 +1504 @@
 }
 
-#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 */
 

trunk/src/wp-admin/includes/screen.php

@@ -975 +975 @@
         <?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; ?>

trunk/src/wp-admin/js/common.js

@@ -106 +106 @@
     init: function() {
         this.element = $('#screen-meta');
-        this.toggles = $('.screen-meta-toggle a');
+        this.toggles = $( '#screen-meta-links' ).find( '.show-settings' );
         this.page    = $('#wpcontent');
 
@@ -112 +112 @@
     },
 
-    toggleEvent: function( e ) {
-        var panel = $( this.href.replace(/.+#/, '#') );
-        e.preventDefault();
+    toggleEvent: function() {
+        var panel = $( '#' + $( this ).attr( 'aria-controls' ) );
 
         if ( !panel.length )
@@ -125 +124 @@
     },
 
-    open: function( panel, link ) {
-
-        $('.screen-meta-toggle').not( link.parent() ).css('visibility', 'hidden');
+    open: function( panel, button ) {
+
+        $( '#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 );
         });
 
@@ -138 +137 @@
     },
 
-    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();