diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 867ce6b..9074743 100644
a
|
b
|
img { |
3080 | 3080 | /* Metabox collapse arrow indicators */ |
3081 | 3081 | .js .sidebar-name .sidebar-name-arrow:before, |
3082 | 3082 | .js .meta-box-sortables .postbox .toggle-indicator:before, |
3083 | | .bulk-action-notice .toggle-indicator:before { |
3084 | | content: "\f142"; |
| 3083 | .bulk-action-notice .toggle-indicator:before, |
| 3084 | .js .accordion-section .handlediv .sidebar-name-arrow:before { |
3085 | 3085 | display: inline-block; |
3086 | 3086 | font: normal 20px/1 dashicons; |
3087 | 3087 | speak: none; |
… |
… |
img { |
3090 | 3090 | text-decoration: none !important; |
3091 | 3091 | } |
3092 | 3092 | |
| 3093 | /* Open state */ |
| 3094 | .js .sidebar-name .sidebar-name-arrow:before, |
| 3095 | .js .meta-box-sortables .postbox .toggle-indicator:before, |
| 3096 | .bulk-action-notice .toggle-indicator:before, |
| 3097 | .js .accordion-section.open .handlediv .sidebar-name-arrow:before { |
| 3098 | content: "\f142"; |
| 3099 | } |
| 3100 | |
| 3101 | /* Closed state */ |
3093 | 3102 | .js .widgets-holder-wrap.closed .sidebar-name-arrow:before, |
3094 | 3103 | .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before, |
3095 | | .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before { |
| 3104 | .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before, |
| 3105 | .js .accordion-section .handlediv .sidebar-name-arrow:before { |
3096 | 3106 | content: "\f140"; |
3097 | 3107 | } |
3098 | 3108 | |
3099 | | .js .sidebar-name .sidebar-name-arrow:before { |
3100 | | padding: 10px; |
3101 | | left: 0; |
3102 | | } |
3103 | | |
3104 | 3109 | .js #widgets-left .sidebar-name .sidebar-name-arrow { |
3105 | 3110 | display: none; |
3106 | 3111 | } |
… |
… |
img { |
3143 | 3148 | 0 0 2px 1px rgba(30, 140, 190, .8); |
3144 | 3149 | } |
3145 | 3150 | |
| 3151 | .js .metabox-holder .accordion-section .accordion-section-title:after { |
| 3152 | content: none; |
| 3153 | } |
| 3154 | |
| 3155 | .js .metabox-holder .accordion-section .handlediv { |
| 3156 | float: right; |
| 3157 | position: relative; |
| 3158 | top: 11px; |
| 3159 | margin-right: 11px; |
| 3160 | z-index: 2; |
| 3161 | } |
| 3162 | |
| 3163 | .js .metabox-holder .accordion-section .handlediv .sidebar-name-arrow:before { |
| 3164 | width: 20px; |
| 3165 | border-radius: 50%; |
| 3166 | text-indent: -1px; /* account for the dashicon alignment */ |
| 3167 | } |
| 3168 | |
| 3169 | .js .metabox-holder .accordion-section .handlediv:focus { |
| 3170 | outline: none; |
| 3171 | border: none; |
| 3172 | box-shadow: none; |
| 3173 | } |
| 3174 | |
| 3175 | .js .metabox-holder .accordion-section .handlediv:focus .sidebar-name-arrow:before { |
| 3176 | box-shadow: |
| 3177 | 0 0 0 1px #5b9dd9, |
| 3178 | 0 0 2px 1px rgba(30, 140, 190, .8); |
| 3179 | } |
| 3180 | |
3146 | 3181 | /* @todo: appears to be Press This only and overridden */ |
3147 | 3182 | #photo-add-url-div input[type="text"] { |
3148 | 3183 | width: 300px; |
… |
… |
img { |
3240 | 3275 | .nav-menus-php .item-edit:before, |
3241 | 3276 | .widget-top .widget-action .toggle-indicator:before, |
3242 | 3277 | .control-section .accordion-section-title:after, |
3243 | | .accordion-section-title:after { |
| 3278 | .accordion-section-title:after, |
| 3279 | .accordion-section-arrow:after { |
| 3280 | right: 0; |
3244 | 3281 | content: "\f140"; |
3245 | 3282 | font: normal 20px/1 dashicons; |
3246 | 3283 | speak: none; |
… |
… |
img { |
3300 | 3337 | .control-section.open .accordion-section-title:after, |
3301 | 3338 | #customize-info.open .accordion-section-title:after, |
3302 | 3339 | .nav-menus-php .menu-item-edit-active .item-edit:before, |
3303 | | .widget.open .widget-top .widget-action .toggle-indicator:before { |
| 3340 | .widget.open .widget-top .widget-action .toggle-indicator:before, |
| 3341 | .open .accordion-section-arrow:after { |
3304 | 3342 | content: "\f142"; |
3305 | 3343 | } |
3306 | 3344 | |
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index ae28a38..bc794e5 100644
a
|
b
|
|
92 | 92 | box-sizing: border-box; |
93 | 93 | } |
94 | 94 | |
95 | | .sidebar-name-arrow { |
96 | | position: absolute; |
97 | | top: 0; |
98 | | right: 0; |
99 | | bottom: 0; |
| 95 | .js .sidebar-name .handlediv { |
| 96 | float: right; |
| 97 | width: 32px; |
| 98 | height: 32px; |
| 99 | padding: 0; |
| 100 | } |
| 101 | |
| 102 | .js .sidebar-name .handlediv:focus { |
| 103 | box-shadow: none; |
| 104 | outline: none; |
| 105 | } |
| 106 | |
| 107 | .js #widgets-left .sidebar-name .handlediv:focus .sidebar-name-arrow { |
| 108 | display: block; |
| 109 | } |
| 110 | |
| 111 | .js .sidebar-name .handlediv:focus .sidebar-name-arrow:before { |
| 112 | box-shadow: |
| 113 | 0 0 0 1px #5b9dd9, |
| 114 | 0 0 2px 1px rgba(30, 140, 190, .8); |
| 115 | } |
| 116 | |
| 117 | .js .sidebar-name .sidebar-name-arrow:before { |
| 118 | margin-top: 14px; |
| 119 | width: 20px; |
| 120 | border-radius: 50%; |
| 121 | text-indent: -1px; /* account for the dashicon alignment */ |
| 122 | } |
| 123 | |
| 124 | .js .widget-liquid-left .sidebar-name .sidebar-name-arrow:before { |
| 125 | margin-top: 7px; |
100 | 126 | } |
101 | 127 | |
102 | 128 | .js .sidebar-name { |
… |
… |
div#widgets-left .sidebar-name h3 { |
157 | 183 | margin: 0 10px 0 0; |
158 | 184 | } |
159 | 185 | |
160 | | #widgets-left .sidebar-name .sidebar-name-arrow:before { |
161 | | padding: 9px; |
162 | | } |
163 | | |
164 | 186 | #widgets-left .widgets-holder-wrap, |
165 | 187 | div#widgets-left .widget-holder { |
166 | 188 | background: transparent; |
… |
… |
div#widgets-right .sidebar-name h3 { |
250 | 272 | padding: 15px 7px; |
251 | 273 | } |
252 | 274 | |
253 | | div#widgets-right .sidebar-name .sidebar-name-arrow:before { |
254 | | top: 2px; |
255 | | } |
256 | | |
257 | 275 | div#widgets-right .widget-top { |
258 | 276 | padding: 0; |
259 | 277 | } |
diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
index a4672fd..f568e39 100644
a
|
b
|
function do_accordion_sections( $screen, $context, $object ) { |
1161 | 1161 | } |
1162 | 1162 | ?> |
1163 | 1163 | <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>"> |
1164 | | <h3 class="accordion-section-title hndle" tabindex="0"> |
| 1164 | <button type="button" class="handlediv button-link" aria-expanded="true"> |
| 1165 | <span class="screen-reader-text"><?php echo sprintf( __( 'Toggle panel: %s' ), esc_html( $box['title'] ) ); ?></span> |
| 1166 | <span class="sidebar-name-arrow" aria-hidden="true"></span> |
| 1167 | </button> |
| 1168 | <h3 class="accordion-section-title hndle"> |
1165 | 1169 | <?php echo esc_html( $box['title'] ); ?> |
1166 | | <span class="screen-reader-text"><?php _e( 'Press return or enter to open this section' ); ?></span> |
1167 | 1170 | </h3> |
1168 | 1171 | <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>"> |
1169 | 1172 | <div class="inside"> |
diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php
index e6af6e7..408165c 100644
a
|
b
|
function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { |
80 | 80 | if ( $sidebar_name ) { |
81 | 81 | ?> |
82 | 82 | <div class="sidebar-name"> |
83 | | <div class="sidebar-name-arrow"><br /></div> |
| 83 | <button type="button" class="handlediv button-link" aria-expanded="true"> |
| 84 | <span class="screen-reader-text"><?php echo sprintf( __( 'Toggle panel: %s' ), $sidebar_name ); ?></span> |
| 85 | <span class="sidebar-name-arrow" aria-hidden="true"></span> |
| 86 | </button> |
84 | 87 | <h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2> |
85 | 88 | </div> |
86 | 89 | <?php |
diff --git a/src/wp-admin/js/accordion.js b/src/wp-admin/js/accordion.js
index af62815..6eb919a 100644
a
|
b
|
|
33 | 33 | $( document ).ready( function () { |
34 | 34 | |
35 | 35 | // Expand/Collapse accordion sections on click. |
36 | | $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { |
| 36 | $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title, .handlediv', function( e ) { |
37 | 37 | if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key |
38 | 38 | return; |
39 | 39 | } |
diff --git a/src/wp-admin/widgets.php b/src/wp-admin/widgets.php
index db4459b..ade84bb 100644
a
|
b
|
|
387 | 387 | <div id="widgets-left"> |
388 | 388 | <div id="available-widgets" class="widgets-holder-wrap"> |
389 | 389 | <div class="sidebar-name"> |
390 | | <div class="sidebar-name-arrow"><br /></div> |
| 390 | <button type="button" class="handlediv button-link" aria-expanded="true"> |
| 391 | <span class="screen-reader-text">Toggle panel: <?php _e( 'Available Widgets' ); ?></span> |
| 392 | <span class="sidebar-name-arrow" aria-hidden="true"></span> |
| 393 | </button> |
391 | 394 | <h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2> |
392 | 395 | </div> |
393 | 396 | <div class="widget-holder"> |