Accessibility: Improve the sidebar toggles in the Widgets screen.

- uses button elements for the toggles
- uses `aria-expanded` on the toggles to communicate to assistive technologies the panels expanded/collapsed state
- adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
- standardizes CSS class names to `.toggle-indicator` and `.handlediv` as these names are already used across the admin for similar controls

Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes #37013.


git-svn-id: https://develop.svn.wordpress.org/trunk@41621 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/includes/widgets.php

@@ -80,7 +80,10 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
 	if ( $sidebar_name ) {
 		?>
 		<div class="sidebar-name">
-			<div class="sidebar-name-arrow"><br /></div>
+			<button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
+				<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>
 		</div>
 		<?php