Changeset 39141 for trunk/src/wp-admin/css/admin-menu.css

Timestamp:

11/04/2016 04:01:24 PM (8 years ago)

Author:

jorbin

Message:

Administration: Ensure collapse menu is usable with a keyboard

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

File:

• trunk/src/wp-admin/css/admin-menu.css (modified) (7 diffs)

trunk/src/wp-admin/css/admin-menu.css

@@ -265 +265 @@
 .folded #adminmenu a.menu-top:focus + .wp-submenu,
 .folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
-.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu  {
+.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
     top: 0;
     left: 36px;
@@ -548 +548 @@
 }
 
-#collapse-menu {
-    font-size: 13px;
+#collapse-button {
+    display: block;
+    width: 100%;
+    height: 34px;
+    margin: 0;
+    border: none;
+    padding: 0;
+    position: relative;
+    overflow: visible;
     line-height: 34px;
-    margin-top: 10px;
-    color: #a0a5aa;
-    color: rgba(240,245,250,0.6);
-    -webkit-transition: all .1s ease-in-out;
-    transition: all .1s ease-in-out;
-}
-
-#collapse-menu:hover,
-#collapse-menu:hover #collapse-button div:after {
+    background: none;
+    color: #aaa;
+    cursor: pointer;
+    outline: 0;
+}
+
+#collapse-button:hover,
+#collapse-button:focus {
     color: #00b9eb;
 }
 
-.folded #collapse-menu span {
+#collapse-button .collapse-button-icon,
+#collapse-button .collapse-button-label {
+    /* absolutely positioned to avoid 1px shift in IE when button is pressed */
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 34px;
+}
+
+#collapse-button .collapse-button-icon {
+    width: 36px;
+    height: 34px;
+}
+
+#collapse-button .collapse-button-label {
+    padding: 0 0 0 36px;
+}
+
+.folded #collapse-button .collapse-button-label {
     display: none;
 }
 
-#collapse-button,
-#collapse-button div {
-    width: 15px;
-    height: 15px;
-}
-
-#collapse-button {
-    float: left;
-    height: 15px;
-    margin: 10px 8px 10px 11px;
-    width: 15px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-}
-
-#wpwrap #collapse-button div {
-    padding: 0;
-}
-
-#collapse-button div:after {
+#collapse-button .collapse-button-icon:after {
     content: "\f148";
     display: block;
-    line-height: 15px;
-    left: -3px;
-    top: -3px;
-    color: #a0a5aa;
-    color: rgba(240,245,250,0.6);
+    position: relative;
+    top: 7px;
+    text-align: center;
     font: normal 20px/1 dashicons !important;
     speak: none;
-    margin: 0 auto;
-    padding: 0 !important;
-    position: relative;
-    text-align: center;
-    width: 20px;
-    -webkit-transition: all .1s ease-in-out;
-    transition: all .1s ease-in-out;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -608 +605 @@
 
 /* rtl:ignore */
-.folded #collapse-button div:after,
-.rtl #collapse-button div:after {
+.folded #collapse-button .collapse-button-icon:after,
+.rtl #collapse-button .collapse-button-icon:after {
     -webkit-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
@@ -615 +612 @@
 }
 
-.rtl.folded #collapse-button div:after {
+.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;
 }
 
@@ -653 +656 @@
     .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
     .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
-    .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
+    .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
         top: 0px;
         left: 36px;
@@ -732 +735 @@
     }
 
-    .auto-fold #collapse-menu span {
+    .auto-fold #collapse-menu .collapse-button-label {
         display: none;
     }
 
-    .auto-fold #collapse-button div {
-        background: none;
-    }
-
     /* rtl:ignore */
-    .auto-fold #collapse-button div:after {
+    .auto-fold #collapse-button .collapse-button-icon:after {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
@@ -747 +746 @@
     }
 
-    .rtl.auto-fold #collapse-button div:after {
+    .rtl.auto-fold #collapse-button .collapse-button-icon:after {
         -webkit-transform: none;
         -ms-transform: none;