From 52c2492afbad473ddbec3980e9325d8342bcecf7 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sat, 10 Oct 2015 16:33:33 +0000
Subject: [PATCH] Accessibility: bump headings one level up on the Appearance >
 Widgets screen for a better headings hierarchy.

Props mrahmadawais, afercia.
Fixes #33659.

git-svn-id: https://develop.svn.wordpress.org/trunk@35015 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-widgets.css | 8 ++++++--
 src/wp-admin/css/widgets.css           | 5 +++++
 src/wp-admin/includes/widgets.php      | 4 ++--
 src/wp-admin/js/widgets.js             | 4 ++--
 src/wp-admin/widgets.php               | 4 ++--
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css
index c4a4ff7b1a..d63e806c8d 100644
--- a/src/wp-admin/css/customize-widgets.css
+++ b/src/wp-admin/css/customize-widgets.css
@@ -419,7 +419,11 @@ body.adding-widget .add-new-widget:before {
 	box-shadow: none;
 }
 
-#available-widgets .widget-title h4 {
+#customize-controls .widget-title h3 {
+	font-size: 1em;
+}
+
+#available-widgets .widget-title h3 {
 	padding: 0 0 5px;
 	font-size: 14px;
 }
@@ -621,7 +625,7 @@ body.adding-widget #customize-preview {
 	.last-widget {
 		margin-bottom: 15px;
 	}
-	.widget-title h4 {
+	.widget-title h3 {
 		padding: 13px 15px;
 	}
 	.widget-top a.widget-action:after {
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index ccdfa9b469..2c10fbe64e 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -22,9 +22,11 @@
 	text-decoration: none;
 }
 
+.widget-title h3,
 .widget-title h4 {
 	margin: 0;
 	padding: 15px;
+	font-size: 1em;
 	line-height: 1;
 	overflow: hidden;
 	white-space: nowrap;
@@ -100,6 +102,7 @@
 	cursor: pointer;
 }
 
+.sidebar-name h2,
 .sidebar-name h3 {
 	margin: 0;
 	padding: 8px 10px;
@@ -142,6 +145,7 @@ div#widgets-left .inactive-sidebar.closed .sidebar-name {
 	margin-bottom: 10px;
 }
 
+div#widgets-left .sidebar-name h2,
 div#widgets-left .sidebar-name h3 {
 	padding: 10px 0;
 	margin: 0 10px 0 0;
@@ -243,6 +247,7 @@ div#widgets-right .sidebar-description {
 	margin-top: -5px;
 }
 
+div#widgets-right .sidebar-name h2,
 div#widgets-right .sidebar-name h3 {
 	padding: 15px 7px;
 }
diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php
index 7a0996d0ba..746a892798 100644
--- a/src/wp-admin/includes/widgets.php
+++ b/src/wp-admin/includes/widgets.php
@@ -81,7 +81,7 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
 		?>
 		<div class="sidebar-name">
 			<div class="sidebar-name-arrow"><br /></div>
-			<h3><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h3>
+			<h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
 		</div>
 		<?php
 	}
@@ -226,7 +226,7 @@ function wp_widget_control( $sidebar_args ) {
 			<span class="screen-reader-text"><?php echo $widget_title; ?></span>
 		</a>
 	</div>
-	<div class="widget-title"><h4><?php echo $widget_title ?><span class="in-widget-title"></span></h4></div>
+	<div class="widget-title"><h3><?php echo $widget_title; ?><span class="in-widget-title"></span></h3></div>
 	</div>
 
 	<div class="widget-inside">
diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js
index 16a0058784..e18157fa57 100644
--- a/src/wp-admin/js/widgets.js
+++ b/src/wp-admin/js/widgets.js
@@ -297,7 +297,7 @@ wpWidgets = {
 
 				if ( ui.draggable.hasClass('ui-sortable-helper') ) {
 					$('#removing-widget').show().children('span')
-					.html( ui.draggable.find('div.widget-title').children('h4').html() );
+					.html( ui.draggable.find( 'div.widget-title' ).children( 'h3' ).html() );
 				}
 			},
 			out: function(e,ui) {
@@ -310,7 +310,7 @@ wpWidgets = {
 		// Area Chooser
 		$( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
 			var $element = $( element ),
-				name = $element.find( '.sidebar-name h3' ).text(),
+				name = $element.find( '.sidebar-name h2' ).text(),
 				id = $element.find( '.widgets-sortables' ).attr( 'id' ),
 				li = $('<li tabindex="0">').text( $.trim( name ) );
 
diff --git a/src/wp-admin/widgets.php b/src/wp-admin/widgets.php
index 69b3161529..165f190f1f 100644
--- a/src/wp-admin/widgets.php
+++ b/src/wp-admin/widgets.php
@@ -244,7 +244,7 @@ if ( isset($_GET['editwidget']) && $_GET['editwidget'] ) {
 	<div class="wrap">
 	<h1><?php echo esc_html( $title ); ?></h1>
 	<div class="editwidget"<?php echo $width; ?>>
-	<h3><?php printf( __( 'Widget %s' ), $name ); ?></h3>
+	<h2><?php printf( __( 'Widget %s' ), $name ); ?></h2>
 
 	<form action="widgets.php" method="post">
 	<div class="widget-inside">
@@ -361,7 +361,7 @@ do_action( 'widgets_admin_page' ); ?>
 	<div id="available-widgets" class="widgets-holder-wrap">
 		<div class="sidebar-name">
 			<div class="sidebar-name-arrow"><br /></div>
-			<h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3>
+			<h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
 		</div>
 		<div class="widget-holder">
 			<div class="sidebar-description">