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/widgets.php

@@ -387,7 +387,10 @@ do_action( 'widgets_admin_page' ); ?>
 <div id="widgets-left">
 	<div id="available-widgets" class="widgets-holder-wrap">
 		<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 _e( 'Available Widgets' ); ?></span>
+				<span class="toggle-indicator" aria-hidden="true"></span>
+			</button>
 			<h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
 		</div>
 		<div class="widget-holder">