Add label in mini search component (#10583)

src/Umbraco.Web.UI.Client/src/common/directives/components/umbminisearch.component.js

@@ -11,17 +11,20 @@
                 model: "=",
                 onStartTyping: "&?",
                 onSearch: "&?",
-                onBlur: "&?"
+                onBlur: "&?",
+                labelKey: "@?",
+                inputId: "@?"
             }
         });
 
-    function UmbMiniSearchController($scope) {
-        
+    function UmbMiniSearchController($scope, localizationService) {
+
         var vm = this;
 
         vm.onKeyDown = onKeyDown;
         vm.onChange = onChange;
-        
+        vm.$onInit = onInit;
+
         var searchDelay = _.debounce(function () {
             $scope.$apply(function () {
                 if (vm.onSearch) {
@@ -29,7 +32,7 @@
                 }
             });
         }, 500);
-    
+
         function onKeyDown(evt) {
             //13: enter
             switch (evt.keyCode) {
@@ -40,7 +43,7 @@
                     break;
             }
         }
-    
+
         function onChange() {
             if (vm.onStartTyping) {
                 vm.onStartTyping();
@@ -48,6 +51,21 @@
             searchDelay();
         }
 
+        function onInit() {
+            vm.inputId = vm.inputId || "search_" + String.CreateGuid();
+            setText();
+        }
+
+        function setText() {
+            var keyToLocalize = vm.labelKey || 'general_search';
+
+            localizationService.localize(keyToLocalize).then(function (data) {
+                // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
+                if(data.indexOf('[') === -1){
+                    vm.text = data;
+                }
+            });
+        }
     }
 
 })();

src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less

@@ -1,24 +1,23 @@
 .umb-mini-search {
     position: relative;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .icon {
         position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 20px;
-        margin: 5px;
-        padding: 1px;
+        left: 9px;
+        width: 1em;
+        height: 1em;
         pointer-events: none;
         color: @ui-action-discreet-type;
         transition: color .1s linear;
     }
 
     input {
-        width: 0px;
+        width: 0;
         padding-left: 24px;
-        margin-bottom: 0px;
+        margin-bottom: 0;
         background-color: transparent;
         border-color: @ui-action-discreet-border;
         transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out;
@@ -42,9 +41,9 @@
         border-color: @ui-action-discreet-border-hover;
         cursor: unset;
     }
-
+    
     input:focus, &:focus-within input, &.--has-value input {
         width: 190px;
-        padding-left: 30px;
+        padding-left:30px;
     }
 }

src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html

@@ -1,6 +1,10 @@
 <ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
     <umb-icon icon="icon-search" class="icon icon-search"></umb-icon>
+    <label class="sr-only" for="{{vm.inputId}}">
+        {{vm.text}}
+    </label>
     <input type="text"
+           id="{{vm.inputId}}"
            class="form-control search-input"
            localize="placeholder,label"
            label="@general_typeToSearch"