From 9bf79ed86226a91d16fcee550b2605415887203e Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@git.wordpress.org>
Date: Thu, 18 Jun 2015 16:35:12 +0000
Subject: [PATCH] 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@32844 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css      | 37 ++++++++++----------------------
 src/wp-admin/includes/screen.php |  4 ++--
 src/wp-admin/js/common.js        | 17 +++++++--------
 3 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 142e20dc52..d64cd5bbce 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -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 {
diff --git a/src/wp-admin/includes/screen.php b/src/wp-admin/includes/screen.php
index 2f7a6deae8..fba5dc9da0 100644
--- a/src/wp-admin/includes/screen.php
+++ b/src/wp-admin/includes/screen.php
@@ -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>
diff --git a/src/wp-admin/js/common.js b/src/wp-admin/js/common.js
index f7e5d894e9..f6d18da10a 100644
--- a/src/wp-admin/js/common.js
+++ b/src/wp-admin/js/common.js
@@ -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();
 		});