Accessibility: Widgets: Make the "Available Widgets" section operable with a keyboard.

For a number of years, the "Available Widgets" section has been off-limits for
keyboard users. Now it can be used also with the keyboard. This change introduces
also some improvements for assistive technologies.

- makes the widget toggles focusable and adds an `aria-expanded` attribute to indicate their state
- improves the toggles labelling to clarify context (add/edit)
- changes the controls to choose a sidebar from list items to buttons
- adds an `aria-label` attribute to the buttons to clarify their purpose
- adds an `aria-pressed` attribute to the buttons to indicate which one is selected
- improves color contrast of the selected button
- uses a `wp.a11y.speak()` message to announce to screen reader users when a widget has been added to a sidebar
- moves focus back to the toggle button when closing a widget

See #40677.


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

src/wp-admin/includes/widgets.php

@@ -90,8 +90,13 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
 	echo '<div id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';
 
 	if ( $sidebar_name ) {
+		$add_to = sprintf(
+			/* translators: %s: widgets sidebar name. */
+			__( 'Add to: %s' ),
+			$sidebar_name
+		);
 		?>
-		<div class="sidebar-name">
+		<div class="sidebar-name" data-add-to="<?php echo esc_attr( $add_to ); ?>">
 			<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>
@@ -239,7 +244,8 @@ function wp_widget_control( $sidebar_args ) {
 	<div class="widget-top">
 	<div class="widget-title-action">
 		<button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
-			<span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
+			<span class="screen-reader-text edit"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
+			<span class="screen-reader-text add"><?php printf( __( 'Add widget: %s' ), $widget_title ); ?></span>
 			<span class="toggle-indicator" aria-hidden="true"></span>
 		</button>
 		<a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">