Ticket #40677: 40677-headings.diff

src/wp-admin/css/widgets.css

@@ -353 +353 @@
         width: 58%;
 }
 
-/* Widgets Left - Available Widgets */
-
-div#widgets-left {
+div#widgets-left,
+div#widgets-right {
         padding-top: 12px;
 }
 
+/* Widgets Left - Available Widgets */
+
 div#widgets-left .closed .sidebar-name,
 div#widgets-left .inactive-sidebar.closed .sidebar-name {
         margin-bottom: 10px;
@@ -367 +368 @@
 div#widgets-left .sidebar-name h2,
 div#widgets-left .sidebar-name h3 {
         padding: 10px 0;
-        margin: 0 10px 0 0;
 }
 
 #widgets-left .widgets-holder-wrap,
@@ -445 +445 @@
 
 /* Widgets Right */
 
+#widgets-right .available-sidebars {
+        margin: 0;
+        padding: 10px 0;
+}
+
 div#widgets-right .sidebars-column-1,
 div#widgets-right .sidebars-column-2 {
         max-width: 450px;

src/wp-admin/includes/widgets.php

@@ -87 +87 @@
 
         $description = wp_sidebar_description( $sidebar );
 
+        $heading = '<h3>%s <span class="spinner"></span></h3>';
+
+        if ( 'wp_inactive_widgets' === $sidebar ) {
+                $heading = '<h2>%s <span class="spinner"></span></h2>';
+        }
+
         echo '<div id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';
 
         if ( $sidebar_name ) {
@@ -96 +102 @@
                                 <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
                                 <span class="toggle-indicator" aria-hidden="true"></span>
                         </button>
-                        <h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
+                        <?php printf( $heading, esc_html( $sidebar_name ) ) ?>
                 </div>
                 <?php
         }
@@ -234 +240 @@
         $widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) );
         $has_form     = 'noform';
 
+        $heading = '<h3>%s <span class="in-widget-title"></span</h3>';
+
+        if ( $sidebar_id && 'wp_inactive_widgets' !== $sidebar_id ) {
+                $heading = '<h4>%s <span class="in-widget-title"></span</h4>';
+        }
+
         echo $sidebar_args['before_widget'];
         ?>
         <div class="widget-top">
@@ -248 +260 @@
                         <span class="screen-reader-text"><?php echo $widget_title; ?></span>
                 </a>
         </div>
-        <div class="widget-title"><h3><?php echo $widget_title; ?><span class="in-widget-title"></span></h3></div>
+        <div class="widget-title"><?php printf( $heading, $widget_title ); ?></div>
         </div>
 
         <div class="widget-inside">

src/wp-admin/js/widgets.js

@@ -377 +377 @@
                                 } else {
                                         wpWidgets.saveOrder( $sidebar.attr('id') );
                                 }
+                                wpWidgets.fixHeadingLevels();
                         },
 
                         activate: function() {
@@ -432 +433 @@
                 // Area Chooser
                 $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
                         var $element = $( element ),
-                                name = $element.find( '.sidebar-name h2' ).text(),
+                                name = $element.find( '.sidebar-name h3' ).text(),
                                 id = $element.find( '.widgets-sortables' ).attr( 'id' ),
                                 li = $('<li tabindex="0">').text( $.trim( name ) );
 
@@ -640 +641 @@
                 });
         },
 
+        fixHeadingLevels: function() {
+                $( '#widgets-right .widget-title' ).find( 'h3, h4' ).attr( 'aria-level', '4' );
+                $( '#wp_inactive_widgets .widget-title' ).find( 'h3, h4' ).attr( 'aria-level', '3' );
+        },
+
         addWidget: function( chooser ) {
                 var widget, widgetId, add, n, viewportTop, viewportBottom, sidebarBounds,
                         sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
@@ -682 +688 @@
 
                 $document.trigger( 'widget-added', [ widget ] );
 
+                wpWidgets.fixHeadingLevels();
+
                 /*
                  * Check if any part of the sidebar is visible in the viewport. If it is, don't scroll.
                  * Otherwise, scroll up to so the sidebar is in view.

src/wp-admin/widgets.php

@@ -506 +506 @@
 ?>
 <div class="widget-liquid-right">
 <div id="widgets-right" class="wp-clearfix<?php echo $single_sidebar_class; ?>">
+<h2 class="available-sidebars"><?php _e( 'Available Sidebars' ); ?></h2>
 <div class="sidebars-column-1">
 <?php