From 9054719d29eff09f801cf85b2efa5d49f573da52 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 7 Mar 2018 22:26:39 +0000 Subject: [PATCH] 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/css/common.css | 3 +- src/wp-admin/css/widgets.css | 53 ++++++++++++---------------- src/wp-admin/includes/widgets.php | 10 ++++-- src/wp-admin/js/widgets.js | 57 +++++++++++++++++++------------ src/wp-includes/script-loader.php | 9 ++--- 5 files changed, 72 insertions(+), 60 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 529970bd93..8f81235b05 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3368,7 +3368,8 @@ img { .control-section.open .accordion-section-title:after, #customize-info.open .accordion-section-title:after, .nav-menus-php .menu-item-edit-active .item-edit:before, -.widget.open .widget-top .widget-action .toggle-indicator:before { +.widget.open .widget-top .widget-action .toggle-indicator:before, +.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before { content: "\f142"; } diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 8cdd87f5a8..ede470953a 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -381,10 +381,6 @@ div#widgets-left .widget-holder { box-shadow: none; } -#available-widgets .widget-action { - display: none; -} - #available-widgets .widget { margin: 0; } @@ -516,8 +512,11 @@ div#widgets-right .closed .widgets-sortables { } #available-widgets .widget-control-edit .edit, +#available-widgets .widget-action .edit, #widgets-left .inactive-sidebar .widget-control-edit .add, -#widgets-right .widget-control-edit .add { +#widgets-left .inactive-sidebar .widget-action .add, +#widgets-right .widget-control-edit .add, +#widgets-right .widget-action .add { display: none; } @@ -664,44 +663,40 @@ div#widgets-right .widget-top:hover, } .widgets-chooser li { - padding: 10px 15px 10px 35px; border-bottom: 1px solid #ccc; background: #fff; margin: 0; - cursor: pointer; - outline: none; position: relative; +} + +.widgets-chooser .widgets-chooser-button { + width: 100%; + padding: 10px 15px 10px 35px; + background: transparent; + border: 0; + box-sizing: border-box; + text-align: left; + cursor: pointer; transition: background 0.2s ease-in-out; } - /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ -.widgets-chooser li:hover, -.widgets-chooser li:focus { - background: rgba(255,255,255,0.7); -} - -.widgets-chooser li:focus:before { - content: "\f147"; - display: block; - -webkit-font-smoothing: antialiased; - font: normal 26px/1 dashicons; - color: #555d66; - position: absolute; - top: 7px; - left: 5px; +/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ +.widgets-chooser .widgets-chooser-button:hover, +.widgets-chooser .widgets-chooser-button:focus { + outline: none; + text-decoration: underline; } .widgets-chooser li:last-child { border: none; } -.widgets-chooser li.widgets-chooser-selected { - background: #00a0d2; +.widgets-chooser .widgets-chooser-selected .widgets-chooser-button { + background: #0073aa; color: #fff; } -.widgets-chooser li.widgets-chooser-selected:before, -.widgets-chooser li.widgets-chooser-selected:focus:before { +.widgets-chooser .widgets-chooser-selected:before { content: "\f147"; display: block; -webkit-font-smoothing: antialiased; @@ -717,10 +712,6 @@ div#widgets-right .widget-top:hover, text-align: center; } -.widgets-chooser button { - margin-right: 5px; -} - #available-widgets .widget .widget-top { cursor: pointer; } diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index 0cf647c3f4..640e00afe4 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -90,8 +90,13 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { echo '
'; if ( $sidebar_name ) { + $add_to = sprintf( + /* translators: %s: widgets sidebar name. */ + __( 'Add to: %s' ), + $sidebar_name + ); ?> -
+
diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index bbd287d984..59c2b71dfb 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -21,7 +21,8 @@ wpWidgets = { l10n: { save: '{save}', saved: '{saved}', - saveAlert: '{saveAlert}' + saveAlert: '{saveAlert}', + widgetAdded: '{widgetAdded}' }, /** @@ -176,19 +177,16 @@ wpWidgets = { widget.removeClass( 'open' ); }); } - e.preventDefault(); } else if ( target.hasClass('widget-control-save') ) { wpWidgets.save( target.closest('div.widget'), 0, 1, 0 ); e.preventDefault(); } else if ( target.hasClass('widget-control-remove') ) { wpWidgets.save( target.closest('div.widget'), 1, 1, 0 ); - e.preventDefault(); } else if ( target.hasClass('widget-control-close') ) { widget = target.closest('div.widget'); widget.removeClass( 'open' ); toggleBtn.attr( 'aria-expanded', 'false' ); wpWidgets.close( widget ); - e.preventDefault(); } else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) { wpWidgets.removeInactiveWidgets(); e.preventDefault(); @@ -433,35 +431,53 @@ wpWidgets = { $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) { var $element = $( element ), name = $element.find( '.sidebar-name h2' ).text(), + ariaLabel = $element.find( '.sidebar-name' ).data( 'add-to' ), id = $element.find( '.widgets-sortables' ).attr( 'id' ), - li = $('
  • ').text( $.trim( name ) ); + li = $( '
  • ' ), + button = $( '