ENGCOM-8393: Backend: focus search field when pressing forwardslash - '/' #27674

Author: sidolov

app/code/Magento/Backend/Test/Mftf/Section/AdminHeaderSection.xml

@@ -11,6 +11,8 @@
     <section name="AdminHeaderSection">
         <element name="pageTitle" type="text" selector=".page-header h1.page-title"/>
         <element name="adminUserAccountText" type="text" selector=".page-header .admin-user-account-text" />
+        <element name="globalSearchInput" type="text" selector="#search-global" />
+        <element name="globalSearchInputVisible" type="text" selector=".search-global-field._active #search-global" />
         <!-- Legacy heading section. Mostly used for admin 404 and 403 pages -->
         <element name="pageHeading" type="text" selector=".page-content .page-heading"/>
         <!-- Used for page not found error -->

app/code/Magento/Backend/Test/Mftf/Test/AdminSearchHotkeyTest.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+    <test name="AdminSearchHotkeyTest">
+        <annotations>
+            <features value="Backend"/>
+            <stories value="Search form hotkey in backend"/>
+            <title value="Admin should be able focus on the search field with a hotkey"/>
+            <description value="Admin should be able focus on the search field with a hotkey - forwardslash"/>
+            <severity value="MINOR"/>
+            <group value="backend"/>
+            <group value="search"/>
+        </annotations>
+        <before>
+            <actionGroup ref="AdminLoginActionGroup" stepKey="LoginAsAdmin"/>
+        </before>
+        <after>
+            <actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
+        </after>
+
+        <pressKey selector="body" parameterArray="[/]" stepKey="pressForwardslashKey"/>
+        <seeElement selector="{{AdminHeaderSection.globalSearchInputVisible}}" stepKey="seeActiveGlobalSearchInput"/>
+        <seeInField userInput="" selector="{{AdminHeaderSection.globalSearchInput}}" stepKey="seeEmptyGlobalSearchInput"/>
+        <pressKey selector="{{AdminHeaderSection.globalSearchInput}}" parameterArray="[/]" stepKey="pressForwardslashKeyAgain"/>
+        <seeInField userInput="/" selector="{{AdminHeaderSection.globalSearchInput}}" stepKey="seeForwardSlashInGlobalSearchInput"/>
+    </test>
+</tests>

app/code/Magento/Ui/view/base/web/js/lib/key-codes.js

@@ -21,6 +21,7 @@ define([], function () {
         17: 'ctrlKey',
         18: 'altKey',
         16: 'shiftKey',
+        191: 'forwardSlashKey',
         66: 'bKey',
         73: 'iKey',
         85: 'uKey'

app/design/adminhtml/Magento/backend/web/js/theme.js

@@ -312,8 +312,9 @@ define('globalNavigation', [
 
 define('globalSearch', [
     'jquery',
-    'jquery/ui'
-], function ($) {
+    'Magento_Ui/js/lib/key-codes',
+    'jquery-ui-modules/widget'
+], function ($, keyCodes) {
     'use strict';
 
     $.widget('mage.globalSearch', {
@@ -345,6 +346,25 @@ define('globalSearch', [
             this.input.on('focus.activateGlobalSearchForm', function () {
                 self.field.addClass(self.options.fieldActiveClass);
             });
+
+            $(document).on('keydown.activateGlobalSearchForm', function (event) {
+                var inputs = [
+                    'input',
+                    'select',
+                    'textarea'
+                ];
+
+                if (keyCodes[event.which] !== 'forwardSlashKey' ||
+                    inputs.indexOf(event.target.tagName.toLowerCase()) !== -1 ||
+                    event.target.isContentEditable
+                ) {
+                    return;
+                }
+
+                event.preventDefault();
+
+                self.input.focus();
+            });
         }
     });