Skip to content

Commit 3e27644

Browse files
aferciaafercia
committed
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
1 parent 35ebd35 commit 3e27644

5 files changed

Lines changed: 119 additions & 60 deletions

File tree

‎src/wp-admin/css/common.css‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2966,7 +2966,7 @@ img {
29662966
}
29672967

29682968
/* Metabox collapse arrow indicators */
2969-
.js .sidebar-name .sidebar-name-arrow:before,
2969+
.sidebar-name .toggle-indicator:before,
29702970
.js .meta-box-sortables .postbox .toggle-indicator:before,
29712971
.bulk-action-notice .toggle-indicator:before {
29722972
content: "\f142";
@@ -2978,26 +2978,12 @@ img {
29782978
text-decoration: none !important;
29792979
}
29802980

2981-
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
2981+
.js .widgets-holder-wrap.closed .toggle-indicator:before,
29822982
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
29832983
.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
29842984
content: "\f140";
29852985
}
29862986

2987-
.js .sidebar-name .sidebar-name-arrow:before {
2988-
padding: 10px;
2989-
left: 0;
2990-
}
2991-
2992-
.js #widgets-left .sidebar-name .sidebar-name-arrow {
2993-
display: none;
2994-
}
2995-
2996-
.js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow,
2997-
.js #widgets-left .sidebar-name:hover .sidebar-name-arrow {
2998-
display: block;
2999-
}
3000-
30012987
.js .postbox .handlediv .toggle-indicator:before {
30022988
margin-top: 4px;
30032989
width: 20px;
@@ -3171,7 +3157,7 @@ img {
31713157
.handlediv,
31723158
.postbox .handlediv.button-link,
31733159
.item-edit,
3174-
.sidebar-name-arrow,
3160+
.toggle-indicator,
31753161
.accordion-section-title:after {
31763162
color: #72777c;
31773163
}
@@ -3188,7 +3174,7 @@ img {
31883174
.postbox .handlediv.button-link:focus,
31893175
.item-edit:hover,
31903176
.item-edit:focus,
3191-
.sidebar-name:hover .sidebar-name-arrow,
3177+
.sidebar-name:hover .toggle-indicator,
31923178
.accordion-section-title:hover:after {
31933179
color: #23282d;
31943180
}
@@ -3488,8 +3474,8 @@ img {
34883474
#screen-meta-links a.show-settings,
34893475
.widget-top .widget-action,
34903476
.widget-top .widget-action:hover,
3491-
.sidebar-name-arrow,
3492-
.sidebar-name:hover .sidebar-name-arrow,
3477+
.sidebar-name .toggle-indicator,
3478+
.sidebar-name:hover .toggle-indicator,
34933479
.meta-box-sortables .postbox:hover .handlediv,
34943480
#bulk-titles div a,
34953481
#bulk-titles div a:hover {

‎src/wp-admin/css/widgets.css‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -260,15 +260,50 @@
260260
box-sizing: border-box;
261261
}
262262

263-
.sidebar-name-arrow {
264-
position: absolute;
265-
top: 0;
266-
right: 0;
267-
bottom: 0;
263+
.js .sidebar-name {
264+
cursor: pointer;
268265
}
269266

270-
.js .sidebar-name {
267+
.sidebar-name .handlediv {
268+
float: right;
269+
width: 38px;
270+
height: 38px;
271+
border: 0;
272+
margin: 0;
273+
padding: 8px;
274+
background: none;
271275
cursor: pointer;
276+
outline: none;
277+
}
278+
279+
#widgets-right .sidebar-name .handlediv {
280+
margin: 5px 3px 0 0;
281+
}
282+
283+
.sidebar-name .handlediv:focus {
284+
box-shadow: none;
285+
outline: none;
286+
}
287+
288+
#widgets-left .sidebar-name .toggle-indicator {
289+
display: none;
290+
}
291+
292+
#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
293+
#widgets-left .sidebar-name:hover .toggle-indicator,
294+
#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
295+
display: block;
296+
}
297+
298+
.sidebar-name .toggle-indicator:before {
299+
padding: 1px 2px 1px 0;
300+
border-radius: 50%;
301+
}
302+
303+
.sidebar-name .handlediv:focus .toggle-indicator:before {
304+
box-shadow:
305+
0 0 0 1px #5b9dd9,
306+
0 0 2px 1px rgba(30, 140, 190, .8);
272307
}
273308

274309
.sidebar-name h2,
@@ -325,10 +360,6 @@ div#widgets-left .sidebar-name h3 {
325360
margin: 0 10px 0 0;
326361
}
327362

328-
#widgets-left .sidebar-name .sidebar-name-arrow:before {
329-
padding: 9px;
330-
}
331-
332363
#widgets-left .widgets-holder-wrap,
333364
div#widgets-left .widget-holder {
334365
background: transparent;
@@ -423,10 +454,6 @@ div#widgets-right .sidebar-name h3 {
423454
padding: 15px 7px;
424455
}
425456

426-
div#widgets-right .sidebar-name .sidebar-name-arrow:before {
427-
top: 2px;
428-
}
429-
430457
div#widgets-right .widget-top {
431458
padding: 0;
432459
}
@@ -556,7 +583,7 @@ div#widgets-right .closed .widgets-sortables {
556583
.widget-control-noform,
557584
#access-off,
558585
.widgets_access .widget-action,
559-
.widgets_access .sidebar-name-arrow,
586+
.widgets_access .handlediv,
560587
.widgets_access #access-on,
561588
.widgets_access .widget-holder .description,
562589
.no-js .widget-holder .description {

‎src/wp-admin/includes/widgets.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,10 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
8080
if ( $sidebar_name ) {
8181
?>
8282
<div class="sidebar-name">
83-
<div class="sidebar-name-arrow"><br /></div>
83+
<button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
84+
<span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
85+
<span class="toggle-indicator" aria-hidden="true"></span>
86+
</button>
8487
<h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
8588
</div>
8689
<?php

‎src/wp-admin/js/widgets.js‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,42 @@ wpWidgets = {
3939
sidebars = $('div.widgets-sortables'),
4040
isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
4141

42-
$('#widgets-right .sidebar-name').click( function() {
43-
var $this = $(this),
44-
$wrap = $this.closest('.widgets-holder-wrap');
42+
// Handle the widgets containers in the right column.
43+
$( '#widgets-right .sidebar-name' )
44+
/*
45+
* Toggle the widgets containers when clicked and update the toggle
46+
* button `aria-expanded` attribute value.
47+
*/
48+
.click( function() {
49+
var $this = $( this ),
50+
$wrap = $this.closest( '.widgets-holder-wrap '),
51+
$toggle = $this.find( '.handlediv' );
4552

46-
if ( $wrap.hasClass('closed') ) {
47-
$wrap.removeClass('closed');
48-
$this.parent().sortable('refresh');
49-
} else {
50-
$wrap.addClass('closed');
51-
}
53+
if ( $wrap.hasClass( 'closed' ) ) {
54+
$wrap.removeClass( 'closed' );
55+
$toggle.attr( 'aria-expanded', 'true' );
56+
// Refresh the jQuery UI sortable items.
57+
$this.parent().sortable( 'refresh' );
58+
} else {
59+
$wrap.addClass( 'closed' );
60+
$toggle.attr( 'aria-expanded', 'false' );
61+
}
5262

53-
$document.triggerHandler( 'wp-pin-menu' );
54-
});
63+
// Update the admin menu "sticky" state.
64+
$document.triggerHandler( 'wp-pin-menu' );
65+
})
66+
/*
67+
* Set the initial `aria-expanded` attribute value on the widgets
68+
* containers toggle button. The first one is expanded by default.
69+
*/
70+
.find( '.handlediv' ).each( function( index ) {
71+
if ( 0 === index ) {
72+
// jQuery equivalent of `continue` within an `each()` loop.
73+
return;
74+
}
75+
76+
$( this ).attr( 'aria-expanded', 'false' );
77+
});
5578

5679
// Show AYS dialog when there are unsaved widget changes.
5780
$( window ).on( 'beforeunload.widgets', function( event ) {
@@ -86,8 +109,15 @@ wpWidgets = {
86109
}
87110
});
88111

89-
$('#widgets-left .sidebar-name').click( function() {
90-
$(this).closest('.widgets-holder-wrap').toggleClass('closed');
112+
// Handle the widgets containers in the left column.
113+
$( '#widgets-left .sidebar-name' ).click( function() {
114+
var $wrap = $( this ).closest( '.widgets-holder-wrap' );
115+
116+
$wrap
117+
.toggleClass( 'closed' )
118+
.find( '.handlediv' ).attr( 'aria-expanded', ! $wrap.hasClass( 'closed' ) );
119+
120+
// Update the admin menu "sticky" state.
91121
$document.triggerHandler( 'wp-pin-menu' );
92122
});
93123

@@ -215,7 +245,7 @@ wpWidgets = {
215245
/**
216246
* Open Sidebar when a Widget gets dragged over it.
217247
*
218-
* @param event
248+
* @param {object} event jQuery event object.
219249
*/
220250
over: function( event ) {
221251
var $wrap = $( event.target ).parent();
@@ -227,7 +257,9 @@ wpWidgets = {
227257

228258
if ( $wrap.hasClass( 'closed' ) ) {
229259
wpWidgets.hoveredSidebar = $wrap;
230-
$wrap.removeClass( 'closed' );
260+
$wrap
261+
.removeClass( 'closed' )
262+
.find( '.handlediv' ).attr( 'aria-expanded', 'true' );
231263
}
232264

233265
$( this ).sortable( 'refresh' );
@@ -236,7 +268,7 @@ wpWidgets = {
236268
/**
237269
* Close Sidebar when the Widget gets dragged out of it.
238270
*
239-
* @param event
271+
* @param {object} event jQuery event object.
240272
*/
241273
out: function( event ) {
242274
if ( wpWidgets.hoveredSidebar ) {
@@ -319,7 +351,10 @@ wpWidgets = {
319351
$sidebar = $widget.parent();
320352

321353
if ( $sidebar.parent().hasClass('closed') ) {
322-
$sidebar.parent().removeClass('closed');
354+
$sidebar.parent()
355+
.removeClass( 'closed' )
356+
.find( '.handlediv' ).attr( 'aria-expanded', 'true' );
357+
323358
$children = $sidebar.children('.widget');
324359

325360
// Make sure the dropped widget is at the top
@@ -622,8 +657,10 @@ wpWidgets = {
622657
$( '#' + widgetId ).hide();
623658
}
624659

625-
// Open the widgets container
626-
sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
660+
// Open the widgets container.
661+
sidebar.closest( '.widgets-holder-wrap' )
662+
.removeClass( 'closed' )
663+
.find( '.handlediv' ).attr( 'aria-expanded', 'true' );
627664

628665
sidebar.append( widget );
629666
sidebar.sortable('refresh');
@@ -679,11 +716,14 @@ wpWidgets = {
679716
*
680717
* Used when a Widget gets dragged in/out of the Sidebar and never dropped.
681718
*
682-
* @param sidebar
719+
* @param {object} event jQuery event object.
683720
*/
684-
closeSidebar: function( sidebar ) {
685-
this.hoveredSidebar.addClass( 'closed' );
686-
$( sidebar.target ).css( 'min-height', '' );
721+
closeSidebar: function( event ) {
722+
this.hoveredSidebar
723+
.addClass( 'closed' )
724+
.find( '.handlediv' ).attr( 'aria-expanded', 'false' );
725+
726+
$( event.target ).css( 'min-height', '' );
687727
this.hoveredSidebar = null;
688728
}
689729
};

‎src/wp-admin/widgets.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,10 @@
387387
<div id="widgets-left">
388388
<div id="available-widgets" class="widgets-holder-wrap">
389389
<div class="sidebar-name">
390-
<div class="sidebar-name-arrow"><br /></div>
390+
<button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
391+
<span class="screen-reader-text"><?php _e( 'Available Widgets' ); ?></span>
392+
<span class="toggle-indicator" aria-hidden="true"></span>
393+
</button>
391394
<h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
392395
</div>
393396
<div class="widget-holder">

0 commit comments

Comments
 (0)