mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-05 02:10:45 +01:00
53c8c68365
Currently, the "Collapse menu" item is not focusable and keyboard users can't collapse/expand the admin menu. This aims to fix it so that screen readers no longer announce it as a clickable but it remains unfocusable and thus unusable. So it's now a button. Quoting joedolson at WordCamp Chicago 2014: "If it's supposed to act like a button, it should be a button." Also includes a grunt:precommit run that picked up some postcss changes to src/wp-includes/css/customize-preview.css Fixes #29958. Props ajercia, ipm-frommen for an iterative patch, valendesigns for an iterative patch, GaryJ for feedback, joedolson for feedback, helen for feedback Built from https://develop.svn.wordpress.org/trunk@39141 git-svn-id: http://core.svn.wordpress.org/trunk@39081 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 line
16 KiB
CSS
1 line
16 KiB
CSS
#adminmenu,#adminmenu .wp-submenu,#adminmenuback,#adminmenuwrap{width:160px;background-color:#23282d}#adminmenuback{position:fixed;top:0;bottom:-120px;z-index:1}#adminmenu{clear:right;margin:12px 0;padding:0;list-style:none}.folded #adminmenu,.folded #adminmenu li.menu-top,.folded #adminmenuback,.folded #adminmenuwrap{width:36px}.icon16{height:18px;width:18px;padding:6px;margin:-6px -8px 0 0;float:right}.icon16:before{color:#82878c;font:400 20px/1 dashicons;speak:none;padding:6px 0;height:34px;width:20px;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.icon16.icon-dashboard:before{content:"\f226"}.icon16.icon-post:before{content:"\f109"}.icon16.icon-media:before{content:"\f104"}.icon16.icon-links:before{content:"\f103"}.icon16.icon-page:before{content:"\f105"}.icon16.icon-comments:before{content:"\f101";margin-top:1px}.icon16.icon-appearance:before{content:"\f100"}.icon16.icon-plugins:before{content:"\f106"}.icon16.icon-users:before{content:"\f110"}.icon16.icon-tools:before{content:"\f107"}.icon16.icon-settings:before{content:"\f108"}.icon16.icon-site:before{content:"\f541"}.icon16.icon-generic:before{content:"\f111"}.icon16.icon-appearance,.icon16.icon-comments,.icon16.icon-dashboard,.icon16.icon-generic,.icon16.icon-links,.icon16.icon-media,.icon16.icon-page,.icon16.icon-plugins,.icon16.icon-post,.icon16.icon-settings,.icon16.icon-site,.icon16.icon-tools,.icon16.icon-users,.menu-icon-appearance div.wp-menu-image,.menu-icon-comments div.wp-menu-image,.menu-icon-dashboard div.wp-menu-image,.menu-icon-generic div.wp-menu-image,.menu-icon-links div.wp-menu-image,.menu-icon-media div.wp-menu-image,.menu-icon-page div.wp-menu-image,.menu-icon-plugins div.wp-menu-image,.menu-icon-post div.wp-menu-image,.menu-icon-settings div.wp-menu-image,.menu-icon-site div.wp-menu-image,.menu-icon-tools div.wp-menu-image,.menu-icon-users div.wp-menu-image{background-image:none!important}#adminmenuwrap{position:relative;float:right;z-index:9990}#adminmenu *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#adminmenu li{margin:0;padding:0;cursor:pointer}#adminmenu a{display:block;line-height:18px;padding:2px 5px;color:#eee}#adminmenu .wp-submenu a{color:#b4b9be;color:rgba(240,245,250,.7)}#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover{background:0 0}#adminmenu .wp-submenu a:focus,#adminmenu .wp-submenu a:hover,#adminmenu a:hover,#adminmenu li.menu-top>a:focus{color:#00b9eb}#adminmenu li.menu-top{border:none;min-height:34px;position:relative}#adminmenu .wp-submenu{list-style:none;position:absolute;top:-1000em;right:160px;overflow:visible;word-wrap:break-word}#adminmenu .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu,.folded #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{padding:7px 0 8px;z-index:9999;background-color:#32373c;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2)}#adminmenu a.menu-top:focus+.wp-submenu,.js #adminmenu .opensub .wp-submenu,.js #adminmenu .sub-open,.no-js li.wp-has-submenu:hover .wp-submenu{top:-1px}#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,#adminmenu .wp-has-current-submenu.opensub .wp-submenu,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu,.no-js li.wp-has-current-submenu:hover .wp-submenu{position:relative;z-index:3;top:auto;right:auto;left:auto;bottom:auto;border:0;margin-top:0;-webkit-box-shadow:none;box-shadow:none;background-color:#32373c}#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus{position:relative;background-color:#191e23;color:#00b9eb}.folded #adminmenu li.menu-top:hover,.folded #adminmenu li.opensub>a.menu-top,.folded #adminmenu li>a.menu-top:focus{z-index:10000}#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu .wp-menu-arrow,#adminmenu .wp-menu-arrow div,#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top,.folded #adminmenu li.wp-has-current-submenu{background:#0073aa;color:#fff}.folded #adminmenu .opensub .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,.folded #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,.folded #adminmenu .wp-submenu.sub-open,.folded #adminmenu a.menu-top:focus+.wp-submenu,.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu{top:0;right:36px}.folded #adminmenu .wp-has-current-submenu .wp-submenu,.folded #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{position:absolute;top:-1000em}#adminmenu .wp-not-current-submenu .wp-submenu,.folded #adminmenu .wp-has-current-submenu .wp-submenu{min-width:160px;width:auto}#adminmenu .wp-submenu a{font-size:13px;line-height:1.2;margin:0;padding:6px 0}#adminmenu .opensub .wp-submenu li.current a,#adminmenu .wp-submenu li.current,#adminmenu .wp-submenu li.current a,#adminmenu .wp-submenu li.current a:focus,#adminmenu .wp-submenu li.current a:hover,#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a{color:#fff}#adminmenu .wp-not-current-submenu li>a,.folded #adminmenu .wp-has-current-submenu li>a{padding-left:16px;padding-right:14px;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#adminmenu .wp-has-current-submenu ul>li>a,.folded #adminmenu li.menu-top .wp-submenu>li>a{padding:6px 12px}#adminmenu .wp-submenu-head,#adminmenu a.menu-top{font-size:14px;font-weight:400;line-height:18px;padding:0}#adminmenu .wp-submenu-head{display:none}.folded #adminmenu .wp-menu-name{position:absolute;right:-999px}.folded #adminmenu .wp-submenu-head{display:block}#adminmenu .wp-submenu li{padding:0;margin:0;overflow:hidden}#adminmenu .wp-menu-image img{padding:9px 0 0;opacity:.6;filter:alpha(opacity=60)}#adminmenu div.wp-menu-name{padding:8px 0}#adminmenu div.wp-menu-image{float:right;width:36px;height:34px;margin:0;text-align:center}#adminmenu div.wp-menu-image.svg{background-repeat:no-repeat;background-position:center;-webkit-background-size:20px auto;background-size:20px auto}div.wp-menu-image:before{color:#a0a5aa;color:rgba(240,245,250,.6);padding:7px 0;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#adminmenu div.wp-menu-image:before{color:#a0a5aa;color:rgba(240,245,250,.6)}#adminmenu .current div.wp-menu-image:before,#adminmenu .wp-has-current-submenu div.wp-menu-image:before,#adminmenu a.current:hover div.wp-menu-image:before,#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before{color:#fff}#adminmenu li a:focus div.wp-menu-image:before,#adminmenu li.opensub div.wp-menu-image:before,#adminmenu li:hover div.wp-menu-image:before{color:#00b9eb}.ie8 #adminmenu li.opensub div.wp-menu-image:before{color:#a0a5aa}.folded #adminmenu div.wp-menu-image{width:35px;height:30px;position:absolute;z-index:25}.folded #adminmenu a.menu-top{height:34px}.no-font-face #adminmenu .wp-menu-image{display:none}.no-font-face #adminmenu div.wp-menu-name{padding:8px 12px}.no-font-face.auto-fold #adminmenu .wp-menu-name{margin-right:0}.sticky-menu #adminmenuwrap{position:fixed}.wp-menu-arrow{display:none!important}ul#adminmenu a.wp-has-current-submenu{position:relative}ul#adminmenu a.wp-has-current-submenu:after,ul#adminmenu>li.current>a.current:after{left:0;border:8px solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-left-color:#f1f1f1;top:50%;margin-top:-8px}.folded ul#adminmenu li:hover a.wp-has-current-submenu:after{display:none}.folded ul#adminmenu a.wp-has-current-submenu:after,.folded ul#adminmenu>li a.current:after{border-width:4px;margin-top:-4px}#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{left:0;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-width:8px;top:10px;z-index:10000}.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{border-width:4px;margin-top:-4px;top:18px}#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after{border-left-color:#32373c}#adminmenu li.menu-top:hover .wp-menu-image img,#adminmenu li.wp-has-current-submenu .wp-menu-image img{opacity:1;filter:alpha(opacity=100)}#adminmenu li.wp-menu-separator{height:5px;padding:0;margin:0 0 6px;cursor:inherit}#adminmenu div.separator{height:2px;padding:0}#adminmenu .wp-submenu .wp-submenu-head{color:#fff;font-weight:400;font-size:14px;padding:8px 11px 8px 4px;margin:-7px 0 4px}#adminmenu li.current,.folded #adminmenu li.wp-menu-open{border:0}#adminmenu .awaiting-mod,#adminmenu .update-plugins{display:inline-block;background-color:#d54e21;color:#fff;font-size:9px;line-height:17px;font-weight:600;margin:1px 2px 0 0;vertical-align:top;-webkit-border-radius:10px;border-radius:10px;z-index:26}#adminmenu li .awaiting-mod span,#adminmenu li span.update-plugins span{display:block;padding:0 6px}#adminmenu li a.wp-has-current-submenu .update-plugins,#adminmenu li.current a .awaiting-mod{background-color:#00b9eb;color:#fff}#adminmenu li span.count-0{display:none}#collapse-button{display:block;width:100%;height:34px;margin:0;border:none;padding:0;position:relative;overflow:visible;line-height:34px;background:0 0;color:#aaa;cursor:pointer;outline:0}#collapse-button:focus,#collapse-button:hover{color:#00b9eb}#collapse-button .collapse-button-icon,#collapse-button .collapse-button-label{display:block;position:absolute;top:0;right:0;line-height:34px}#collapse-button .collapse-button-icon{width:36px;height:34px}#collapse-button .collapse-button-label{padding:0 36px 0 0}.folded #collapse-button .collapse-button-label{display:none}#collapse-button .collapse-button-icon:after{content:"\f148";display:block;position:relative;top:7px;text-align:center;font:400 20px/1 dashicons!important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.folded #collapse-button .collapse-button-icon:after,.rtl #collapse-button .collapse-button-icon:after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.rtl.folded #collapse-button .collapse-button-icon:after{-webkit-transform:none;-ms-transform:none;transform:none}#collapse-button .collapse-button-icon:after,#collapse-button .collapse-button-label{-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.customize-support #menu-appearance a[href="themes.php?page=custom-header"],.customize-support #menu-appearance a[href="themes.php?page=custom-background"],li#wp-admin-bar-menu-toggle{display:none}@media only screen and (max-width:960px){.auto-fold #wpcontent,.auto-fold #wpfooter{margin-right:36px}.auto-fold #adminmenu,.auto-fold #adminmenu li.menu-top,.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{width:36px}.auto-fold #adminmenu .opensub .wp-submenu,.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,.auto-fold #adminmenu .wp-submenu.sub-open,.auto-fold #adminmenu a.menu-top:focus+.wp-submenu{top:0;right:36px}.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu,.auto-fold #adminmenu a.wp-has-current-submenu:focus+.wp-submenu{position:absolute;top:-1000em;margin-left:-1px;padding:7px 0 8px;z-index:9999}.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu{min-width:150px;width:auto}.auto-fold #adminmenu .wp-has-current-submenu li>a{padding-left:16px;padding-right:14px}.auto-fold #adminmenu li.menu-top .wp-submenu>li>a{padding-right:12px}.auto-fold #adminmenu .wp-menu-name{position:absolute;right:-999px}.auto-fold #adminmenu .wp-submenu-head{display:block}.auto-fold #adminmenu div.wp-menu-image{height:30px;width:34px;position:absolute;z-index:25}.auto-fold #adminmenu a.menu-top{height:34px}.auto-fold #adminmenu li.wp-menu-open{border:0}.auto-fold #adminmenu .wp-has-current-submenu.menu-top-last{margin-bottom:0}.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after{display:none}.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{border-width:4px;margin-top:-4px;top:16px}.auto-fold ul#adminmenu a.wp-has-current-submenu:after,.auto-fold ul#adminmenu>li a.current:after{border-width:4px;margin-top:-4px}.auto-fold #adminmenu li.menu-top:hover,.auto-fold #adminmenu li.opensub>a.menu-top,.auto-fold #adminmenu li>a.menu-top:focus{z-index:10000}.auto-fold #collapse-menu .collapse-button-label{display:none}.auto-fold #collapse-button .collapse-button-icon:after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.rtl.auto-fold #collapse-button .collapse-button-icon:after{-webkit-transform:none;-ms-transform:none;transform:none}}@media screen and (max-width:782px){.auto-fold #wpcontent{position:relative;margin-right:0;padding-right:10px}.sticky-menu #adminmenuwrap{position:relative;z-index:auto;top:0}.auto-fold #adminmenu,.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{position:absolute;width:190px;z-index:100}.auto-fold #adminmenuback,.auto-fold #adminmenuwrap{display:none}.auto-fold .wp-responsive-open #adminmenuback,.auto-fold .wp-responsive-open #adminmenuwrap{display:block}.auto-fold #adminmenu li.menu-top{width:100%}.auto-fold #adminmenu li a{font-size:16px;padding:5px}.auto-fold #adminmenu li.menu-top .wp-submenu>li>a{padding:10px 20px 10px 10px}.auto-fold #adminmenu .wp-menu-name{position:static;margin-right:35px}.auto-fold ul#adminmenu a.wp-has-current-submenu:after,.auto-fold ul#adminmenu>li.current>a.current:after{border-width:8px;margin-top:-8px}.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after{display:none}#adminmenu .wp-submenu{position:relative;display:none}.auto-fold #adminmenu .selected .wp-submenu,.auto-fold #adminmenu .wp-menu-open .wp-submenu{position:relative;display:block;top:0;right:-1px;-webkit-box-shadow:none;box-shadow:none}.auto-fold #adminmenu .selected .wp-submenu:after,.auto-fold #adminmenu .wp-menu-open .wp-submenu:after{display:none}.auto-fold #adminmenu .opensub .wp-submenu{display:none}.auto-fold #adminmenu .selected .wp-submenu{display:block}.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after{display:block}.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus+.wp-submenu,.auto-fold #adminmenu a.menu-top:focus+.wp-submenu{position:relative;right:-1px;left:0;top:0}#adminmenu .wp-submenu .wp-submenu-head{display:none}#wp-responsive-toggle{position:fixed;top:5px;right:4px;padding-left:10px;z-index:99999;border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#wpadminbar #wp-admin-bar-menu-toggle a{display:block;padding:0;overflow:hidden;outline:0;text-decoration:none;border:1px solid transparent;background:0 0;height:44px;margin-right:-1px}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a{background:#32373c}li#wp-admin-bar-menu-toggle{display:block}#wpadminbar #wp-admin-bar-menu-toggle a:hover{border:1px solid transparent}#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{content:"\f228";display:inline-block;float:right;font:400 40px/45px dashicons;vertical-align:middle;outline:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:44px;width:50px;padding:0;border:none;text-align:center;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before{color:#00b9eb}}@media screen and (max-width:600px){#adminmenuback,#adminmenuwrap{display:none}.wp-responsive-open #adminmenuback,.wp-responsive-open #adminmenuwrap{display:block}.auto-fold #adminmenu{top:46px}} |