IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.

Browse Source 
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
2015-10-20 20:15:26 +00:00
parent 8549e76d56
commit 1e1e7a9fc9
17 changed files with 230 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
wp-admin/css/customize-nav-menus.css
View File

@@ -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,