Ticket #26940: 26940.diff

src/wp-includes/admin-bar.php

@@ -714 +714 @@
         if ( is_admin() )
                 return;
 
+        $focus    = 'document.getElementById(\'wp-admin-bar-search\').className += \' focus\';';
+        $focusout = 'document.getElementById(\'wp-admin-bar-search\').className = document.getElementById(\'wp-admin-bar-search\').className.replace(/\bfocus\b/,\'\').trim();';
+
         $form  = '<form action="' . esc_url( home_url( '/' ) ) . '" method="get" id="adminbarsearch">';
-        $form .= '<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />';
+        $form .= '<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" placeholder="' . __('Search') . '" onfocus="' . $focus . '" onfocusout="' . $focusout . '" />';
         $form .= '<input type="submit" class="adminbar-button" value="' . __('Search') . '"/>';
         $form .= '</form>';
 
         $wp_admin_bar->add_menu( array(
                 'parent' => 'top-secondary',
                 'id'     => 'search',
-                'title'  => $form,
+                'title'  => '<span class="screen-reader-text">' . __( 'Search' ) . '</span>',
                 'meta'   => array(
                         'class'    => 'admin-bar-search',
                         'tabindex' => -1,
                 )
         ) );
+
+        $wp_admin_bar->add_menu( array(
+                'parent' => 'search',
+                'id'     => 'adminbarsearch',
+                'title'  => $form
+        ) );
 }
 
 /**

src/wp-includes/css/admin-bar.css

@@ -101 +101 @@
 }
 
 /* Prevent a Chrome bug that inadvertantly activates
-   :hover states on an element that touches the extreme 
+   :hover states on an element that touches the extreme
    top left corner of the viewport. See #18868 */
 #wpadminbar .quicklinks {
         border-left: 1px solid transparent;
@@ -182 +182 @@
 #wpadminbar .quicklinks .menupop ul li .ab-item,
 #wpadminbar .quicklinks .menupop ul li a strong,
 #wpadminbar .quicklinks .menupop.hover ul li .ab-item,
+#wpadminbar .quicklinks .menupop.focus ul li .ab-item,
 #wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,
 #wpadminbar .shortlink-input {
         line-height: 26px;
@@ -195 +196 @@
 }
 
 #wpadminbar.nojs li:hover > .ab-sub-wrapper,
-#wpadminbar li.hover > .ab-sub-wrapper {
+#wpadminbar li.hover > .ab-sub-wrapper,
+#wpadminbar li.focus > .ab-sub-wrapper {
         display: block;
 }
 
 #wpadminbar .menupop li:hover > .ab-sub-wrapper,
-#wpadminbar .menupop li.hover > .ab-sub-wrapper {
+#wpadminbar .menupop li.hover > .ab-sub-wrapper,
+#wpadminbar .menupop li.focus > .ab-sub-wrapper {
         margin-left: 100%;
         margin-top: -32px;
 }
 
 #wpadminbar .ab-top-secondary .menupop li:hover > .ab-sub-wrapper,
-#wpadminbar .ab-top-secondary .menupop li.hover > .ab-sub-wrapper {
+#wpadminbar .ab-top-secondary .menupop li.hover > .ab-sub-wrapper,
+#wpadminbar .ab-top-secondary .menupop li.focus > .ab-sub-wrapper {
         margin-left: 0;
         left: inherit;
         right: 100%;
@@ -215 +219 @@
 #wpadminbar .ab-top-menu > li > .ab-item:focus,
 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 #wpadminbar .ab-top-menu > li:hover > .ab-item,
-#wpadminbar .ab-top-menu > li.hover > .ab-item {
+#wpadminbar .ab-top-menu > li.hover > .ab-item,
+#wpadminbar .ab-top-menu > li.focus > .ab-item {
         background: #333;
         color: #2ea2cc;
 }
 
 #wpadminbar > #wp-toolbar li:hover span.ab-label,
 #wpadminbar > #wp-toolbar li.hover span.ab-label,
+#wpadminbar > #wp-toolbar li.focus span.ab-label,
 #wpadminbar > #wp-toolbar a:focus span.ab-label {
         color: #2ea2cc;
 }
@@ -285 +291 @@
 #wpadminbar li .ab-item:focus:before,
 #wpadminbar li.hover .ab-icon:before,
 #wpadminbar li.hover .ab-item:before,
+#wpadminbar li.focus .ab-item:before,
 #wpadminbar li:hover #adminbarsearch:before {
         color: #2ea2cc;
 }
@@ -551 +558 @@
 /**
  * Search
  */
-#wpadminbar #wp-admin-bar-search .ab-item {
-        padding: 0;
-        background: transparent;
+#wpadminbar #wp-admin-bar-search > .ab-item {
+        padding: 0 5px;
 }
 
-#wpadminbar #adminbarsearch {
-        position: relative;
-        height: 32px;
-        padding: 0 2px;
-}
-
-#wpadminbar #adminbarsearch:before {
-        position: absolute;
-        top: 6px;
-        left: 5px;
-        z-index: 20;
-        font: normal 20px/1 'dashicons' !important;
+#wpadminbar #wp-admin-bar-search > .ab-item:before {
         content: '\f179';
-        speak: none;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+        font-size: 24px;
+        margin-right: 0;
 }
 
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-        position: relative;
-        z-index: 30;
-        font: 13px/24px "Open Sans", sans-serif;
-        height: 24px;
-        width: 24px;
-        padding: 0 3px 0 24px;
-        margin: 0;
-        color: #ccc;
-        background-color: rgba( 255, 255, 255, 0 );
-        border: none;
-        outline: none;
-        cursor: pointer;
-
-        -webkit-box-shadow: none;
-        box-shadow: none;
-
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-        box-sizing: border-box;
-
-        -webkit-transition-duration: 400ms;
-        -webkit-transition-property: width, background;
-        -webkit-transition-timing-function: ease;
-        -moz-transition-duration: 400ms;
-        -moz-transition-property: width, background;
-        -moz-transition-timing-function: ease;
-        -o-transition-duration: 400ms;
-        -o-transition-property: width, background;
-        -o-transition-timing-function: ease;
+#wpadminbar #wp-admin-bar-search .ab-submenu {
+        padding-bottom: 10px;
 }
 
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-        z-index: 10;
-        color: #000;
-        width: 200px;
-        background-color: rgba( 255, 255, 255, 0.9 );
-        cursor: text;
+#wpadminbar #wp-admin-bar-search .adminbar-input {
+        height: 14px;
+        padding: 4px;
         border: 0;
+        line-height: normal;
+        font-size: 14px;
 }
 
-#wpadminbar.ie7 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-        margin-top: 3px;
-        width: 120px;
-}
-
-#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-        margin-top: 4px;
-        background-color: #464646;
-}
-
-#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-        background-color: #fff;
-}
-
-#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder {
-        color: #999;
-}
-#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder {
-        color: #999;
-}
-#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder {
-        color: #999;
-}
-#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder {
-        color: #999;
-}
-
-#wpadminbar #adminbarsearch .adminbar-button {
+#wpadminbar #wp-admin-bar-search .adminbar-button {
         display: none;
 }
 
@@ -809 +746 @@
         }
 
         #wpadminbar .menupop li:hover > .ab-sub-wrapper,
-        #wpadminbar .menupop li.hover > .ab-sub-wrapper {
+        #wpadminbar .menupop li.hover > .ab-sub-wrapper,
+        #wpadminbar .menupop li.focus > .ab-sub-wrapper {
                 margin-top: -46px;
         }
 
@@ -1002 +940 @@
         /* Allow dropdown list items to appear normally */
         #wpadminbar li:hover ul li,
         #wpadminbar li.hover ul li,
+        #wpadminbar li.focus ul li,
         #wpadminbar li:hover ul li:hover ul li {
                 display: list-item;
         }