Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.
For accessibility, UI controls should preferably be native controls. Adds ARIA attributes and labels to improve accessibility and pair these buttons with the ones in the Menu Customizer. Props obenland, TomHarrigan, sanket.parmar, metodiew, afercia. Fixes #33327. Built from https://develop.svn.wordpress.org/trunk@35304 git-svn-id: http://core.svn.wordpress.org/trunk@35270 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
8549e76d56
commit
1e1e7a9fc9
|
|
@ -615,9 +615,10 @@ p.customize-section-description {
|
|||
|
||||
/* Style for custom settings */
|
||||
|
||||
/*
|
||||
/**
|
||||
* Dropdowns
|
||||
*/
|
||||
|
||||
.accordion-section .dropdown {
|
||||
float: right;
|
||||
display: block;
|
||||
|
|
@ -698,6 +699,7 @@ p.customize-section-description {
|
|||
* iOS can't scroll iframes,
|
||||
* instead it expands the iframe size to match the size of the content
|
||||
*/
|
||||
|
||||
.ios .wp-full-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -710,7 +712,7 @@ p.customize-section-description {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/** Media controls **/
|
||||
/* Media controls */
|
||||
|
||||
.customize-control-media .current,
|
||||
.customize-control-upload .current,
|
||||
|
|
@ -995,6 +997,7 @@ p.customize-section-description {
|
|||
/**
|
||||
* Themes
|
||||
*/
|
||||
|
||||
@-webkit-keyframes customize-reload {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
|
|
@ -1228,6 +1231,82 @@ body.cheatin p {
|
|||
margin: 25px 0 20px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Widgets and Menus common styles
|
||||
*/
|
||||
|
||||
/* higher specificity than .wp-core-ui .button-secondary */
|
||||
#customize-theme-controls .add-new-widget,
|
||||
#customize-theme-controls .add-new-menu-item {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reordering .add-new-widget,
|
||||
.reordering .add-new-menu-item {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
|
||||
}
|
||||
|
||||
.add-new-widget:before,
|
||||
.add-new-menu-item:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Reordering */
|
||||
.reorder-toggle {
|
||||
float: left;
|
||||
padding: 5px 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.reorder-toggle:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.reorder,
|
||||
.reordering .reorder-done {
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.reorder-done,
|
||||
.reordering .reorder {
|
||||
display: none;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.reorder-toggle:hover .reorder-done,
|
||||
.reorder-toggle:active .reorder-done,
|
||||
.reorder-toggle:focus .reorder-done {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
.customize-controls-preview-toggle {
|
||||
display: none;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -615,9 +615,10 @@ p.customize-section-description {
|
|||
|
||||
/* Style for custom settings */
|
||||
|
||||
/*
|
||||
/**
|
||||
* Dropdowns
|
||||
*/
|
||||
|
||||
.accordion-section .dropdown {
|
||||
float: left;
|
||||
display: block;
|
||||
|
|
@ -698,6 +699,7 @@ p.customize-section-description {
|
|||
* iOS can't scroll iframes,
|
||||
* instead it expands the iframe size to match the size of the content
|
||||
*/
|
||||
|
||||
.ios .wp-full-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -710,7 +712,7 @@ p.customize-section-description {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/** Media controls **/
|
||||
/* Media controls */
|
||||
|
||||
.customize-control-media .current,
|
||||
.customize-control-upload .current,
|
||||
|
|
@ -995,6 +997,7 @@ p.customize-section-description {
|
|||
/**
|
||||
* Themes
|
||||
*/
|
||||
|
||||
@-webkit-keyframes customize-reload {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
|
|
@ -1228,6 +1231,82 @@ body.cheatin p {
|
|||
margin: 25px 0 20px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Widgets and Menus common styles
|
||||
*/
|
||||
|
||||
/* higher specificity than .wp-core-ui .button-secondary */
|
||||
#customize-theme-controls .add-new-widget,
|
||||
#customize-theme-controls .add-new-menu-item {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reordering .add-new-widget,
|
||||
.reordering .add-new-menu-item {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
|
||||
}
|
||||
|
||||
.add-new-widget:before,
|
||||
.add-new-menu-item:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Reordering */
|
||||
.reorder-toggle {
|
||||
float: right;
|
||||
padding: 5px 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.reorder-toggle:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.reorder,
|
||||
.reordering .reorder-done {
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.reorder-done,
|
||||
.reordering .reorder {
|
||||
display: none;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.reorder-toggle:hover .reorder-done,
|
||||
.reorder-toggle:active .reorder-done,
|
||||
.reorder-toggle:focus .reorder-done {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
.customize-controls-preview-toggle {
|
||||
display: none;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -90,17 +90,9 @@
|
|||
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
/* Menu-item reordering nav. */
|
||||
.reordering .customize-control-nav_menu .reorder,
|
||||
.customize-control-nav_menu .reorder-done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-control-nav_menu .reorder,
|
||||
.reordering .customize-control-nav_menu .reorder-done {
|
||||
display: inline-block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
/**
|
||||
* Menu items reordering styles
|
||||
*/
|
||||
|
||||
.menu-item-reorder-nav {
|
||||
display: none;
|
||||
|
|
@ -110,12 +102,6 @@
|
|||
left: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls .reordering .add-new-menu-item {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.menu-item-reorder-nav button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -361,10 +347,10 @@
|
|||
|
||||
.wp-customizer button:focus .toggle-indicator:after {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
@ -479,9 +465,10 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add-menu-items mode.
|
||||
/**
|
||||
* Add-menu-items mode
|
||||
*/
|
||||
|
||||
.wp-full-overlay-main {
|
||||
left: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
|
||||
width: 100%;
|
||||
|
|
@ -496,34 +483,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Add-new button. */
|
||||
#customize-theme-controls .add-new-menu-item {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-new-menu-item:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.adding-menu-items .add-new-menu-item,
|
||||
.adding-menu-items .add-new-menu-item:hover,
|
||||
.add-menu-toggle.open,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -90,17 +90,9 @@
|
|||
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
/* Menu-item reordering nav. */
|
||||
.reordering .customize-control-nav_menu .reorder,
|
||||
.customize-control-nav_menu .reorder-done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-control-nav_menu .reorder,
|
||||
.reordering .customize-control-nav_menu .reorder-done {
|
||||
display: inline-block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
/**
|
||||
* Menu items reordering styles
|
||||
*/
|
||||
|
||||
.menu-item-reorder-nav {
|
||||
display: none;
|
||||
|
|
@ -110,12 +102,6 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls .reordering .add-new-menu-item {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.menu-item-reorder-nav button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -361,10 +347,10 @@
|
|||
|
||||
.wp-customizer button:focus .toggle-indicator:after {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
@ -479,9 +465,10 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add-menu-items mode.
|
||||
/**
|
||||
* Add-menu-items mode
|
||||
*/
|
||||
|
||||
.wp-full-overlay-main {
|
||||
right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
|
||||
width: 100%;
|
||||
|
|
@ -496,34 +483,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Add-new button. */
|
||||
#customize-theme-controls .add-new-menu-item {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-new-menu-item:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.adding-menu-items .add-new-menu-item,
|
||||
.adding-menu-items .add-new-menu-item:hover,
|
||||
.add-menu-toggle.open,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -117,44 +117,8 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* Widget reordering styles
|
||||
**/
|
||||
|
||||
.reorder-toggle {
|
||||
float: left;
|
||||
padding: 5px 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.reorder-toggle:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.reorder-done,
|
||||
.reordering .reorder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reordering .reorder-done {
|
||||
display: block;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.reordering .reorder-done:hover,
|
||||
.reordering .reorder-done:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
#customize-theme-controls .reordering .add-new-widget {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
* Widget reordering styles
|
||||
*/
|
||||
|
||||
#customize-theme-controls .widget-reorder-nav {
|
||||
display: none;
|
||||
|
|
@ -213,7 +177,7 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
#customize-theme-controls .move-widget-area {
|
||||
#customize-theme-controls .move-widget-area {
|
||||
display: none;
|
||||
background: #fff;
|
||||
border: 1px solid #dedede;
|
||||
|
|
@ -288,42 +252,15 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Styles for new widget addition panel
|
||||
*/
|
||||
|
||||
.wp-full-overlay-main {
|
||||
left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#customize-theme-controls .add-new-widget {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-new-widget:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body.adding-widget .add-new-widget,
|
||||
body.adding-widget .add-new-widget:hover {
|
||||
background: #eee;
|
||||
|
|
@ -456,7 +393,8 @@ body.adding-widget #customize-preview {
|
|||
* Widget Icon styling
|
||||
* No plurals in naming.
|
||||
* Ordered from lowest to highest specificity.
|
||||
**/
|
||||
*/
|
||||
|
||||
#available-widgets .widget-title {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -117,44 +117,8 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* Widget reordering styles
|
||||
**/
|
||||
|
||||
.reorder-toggle {
|
||||
float: right;
|
||||
padding: 5px 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.reorder-toggle:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.reorder-done,
|
||||
.reordering .reorder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reordering .reorder-done {
|
||||
display: block;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.reordering .reorder-done:hover,
|
||||
.reordering .reorder-done:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
#customize-theme-controls .reordering .add-new-widget {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
* Widget reordering styles
|
||||
*/
|
||||
|
||||
#customize-theme-controls .widget-reorder-nav {
|
||||
display: none;
|
||||
|
|
@ -213,7 +177,7 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
#customize-theme-controls .move-widget-area {
|
||||
#customize-theme-controls .move-widget-area {
|
||||
display: none;
|
||||
background: #fff;
|
||||
border: 1px solid #dedede;
|
||||
|
|
@ -288,42 +252,15 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Styles for new widget addition panel
|
||||
*/
|
||||
|
||||
.wp-full-overlay-main {
|
||||
right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#customize-theme-controls .add-new-widget {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-new-widget:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body.adding-widget .add-new-widget,
|
||||
body.adding-widget .add-new-widget:hover {
|
||||
background: #eee;
|
||||
|
|
@ -456,7 +393,8 @@ body.adding-widget #customize-preview {
|
|||
* Widget Icon styling
|
||||
* No plurals in naming.
|
||||
* Ordered from lowest to highest specificity.
|
||||
**/
|
||||
*/
|
||||
|
||||
#available-widgets .widget-title {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1789,11 +1789,7 @@
|
|||
/**
|
||||
* Keyboard-accessible reordering
|
||||
*/
|
||||
this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
|
||||
if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
|
||||
return;
|
||||
}
|
||||
|
||||
this.container.find( '.reorder-toggle' ).on( 'click', function() {
|
||||
self.toggleReordering( ! self.isReordering );
|
||||
} );
|
||||
},
|
||||
|
|
@ -1804,18 +1800,18 @@
|
|||
_setupAddition: function() {
|
||||
var self = this;
|
||||
|
||||
this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
|
||||
if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
|
||||
return;
|
||||
}
|
||||
this.container.find( '.add-new-widget' ).on( 'click', function() {
|
||||
var addNewWidgetBtn = $( this );
|
||||
|
||||
if ( self.$sectionContent.hasClass( 'reordering' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
|
||||
addNewWidgetBtn.attr( 'aria-expanded', 'true' );
|
||||
api.Widgets.availableWidgetsPanel.open( self );
|
||||
} else {
|
||||
addNewWidgetBtn.attr( 'aria-expanded', 'false' );
|
||||
api.Widgets.availableWidgetsPanel.close();
|
||||
}
|
||||
} );
|
||||
|
|
@ -1869,6 +1865,10 @@
|
|||
* @todo We should have a reordering state instead and rename this to onChangeReordering
|
||||
*/
|
||||
toggleReordering: function( showOrHide ) {
|
||||
var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
|
||||
reorderBtn = this.container.find( '.reorder-toggle' ),
|
||||
widgetsTitle = this.$sectionContent.find( '.widget-title' );
|
||||
|
||||
showOrHide = Boolean( showOrHide );
|
||||
|
||||
if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
|
||||
|
|
@ -1883,10 +1883,16 @@
|
|||
formControl.collapse();
|
||||
} );
|
||||
|
||||
this.$sectionContent.find( '.first-widget .move-widget' ).focus();
|
||||
this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
|
||||
addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
|
||||
reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
|
||||
wp.a11y.speak( l10n.reorderModeOn );
|
||||
// Hide widget titles while reordering: title is already in the reorder controls.
|
||||
widgetsTitle.attr( 'aria-hidden', 'true' );
|
||||
} else {
|
||||
this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
|
||||
addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
|
||||
reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
|
||||
wp.a11y.speak( l10n.reorderModeOff );
|
||||
widgetsTitle.attr( 'aria-hidden', 'false' );
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -344,7 +344,7 @@ class WP_Customize_Control {
|
|||
* @since 3.4.0
|
||||
*/
|
||||
protected function render() {
|
||||
$id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
|
||||
$id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
$class = 'customize-control customize-control-' . $this->type;
|
||||
|
||||
?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
|
||||
|
|
@ -1312,7 +1312,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
|
|||
</span>
|
||||
</label>
|
||||
<div class="container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<?php if ( current_user_can( 'upload_files' ) ): ?>
|
||||
|
|
@ -1465,15 +1465,16 @@ class WP_Widget_Area_Customize_Control extends WP_Customize_Control {
|
|||
* @access public
|
||||
*/
|
||||
public function render_content() {
|
||||
$id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
?>
|
||||
<span class="button-secondary add-new-widget" tabindex="0">
|
||||
<button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
|
||||
<?php _e( 'Add a Widget' ); ?>
|
||||
</span>
|
||||
|
||||
<span class="reorder-toggle" tabindex="0">
|
||||
</button>
|
||||
<button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
|
||||
<span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
|
||||
<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -674,6 +674,10 @@ final class WP_Customize_Widgets {
|
|||
'widgetMovedUp' => __( 'Widget moved up' ),
|
||||
'widgetMovedDown' => __( 'Widget moved down' ),
|
||||
'noAreasRendered' => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
|
||||
'reorderModeOn' => __( 'Reorder mode enabled' ),
|
||||
'reorderModeOff' => __( 'Reorder mode closed' ),
|
||||
'reorderLabelOn' => esc_attr__( 'Reorder widgets' ),
|
||||
'reorderLabelOff' => esc_attr__( 'Close reorder mode' ),
|
||||
),
|
||||
'tpl' => array(
|
||||
'widgetReorderNav' => $widget_reorder_nav_tpl,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.4-alpha-35303';
|
||||
$wp_version = '4.4-alpha-35304';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue