Virtual keyboard: Avoid !important with more specific selectors, esca…

…pe attrs properly. (#3221)

- Avoid !important with more specific selectors, escape attrs properly.
- Prevent navigation to empty anchor when selecting a keyboard.

themes/bootstrap3/js/searchbox_controls.js

@@ -88,8 +88,9 @@ VuFind.register('searchbox_controls', function SearchboxControls() {
     _KeyboardClass = window.SimpleKeyboard.default;
     _KeyboardLayoutClass = window.SimpleKeyboardLayouts.default;
 
-    $('.keyboard-selection-item').on("click", function updateLayoutOnClick(){
+    $('.keyboard-selection-item').on("click", function updateLayoutOnClick(ev) {
       _updateKeyboardLayout($(this).data("value"));
+      ev.preventDefault();
     });
 
     _textInput.addEventListener("focus", () => {

themes/bootstrap3/less/components/keyboard.less

@@ -30,7 +30,7 @@
   }
 
   #keyboard-selection-button {
-    padding: 0 2px 0 4px !important;
+    padding: 0 2px 0 4px;
     .icon {
       margin: 0;
     }
@@ -61,25 +61,26 @@
   display: none;
   position: absolute;
   z-index: 1;
-  background-color: #dddddd !important;
-
+  &.hg-theme-default {
+    background-color: #dddddd;
+  }
 
-  .hg-functionBtn {
+  .hg-button.hg-functionBtn {
     font-weight: bold;
     font-size: 30px;
-    background-color: #f4f4f4 !important;
+    background-color: #f4f4f4;
     span {
       padding-top: 5px;
     }
+
+    &.hg-button-space {
+      background-color: white;
+    }
   }
 
   .hg-standardBtn {
     font-size: 18px;
   }
-
-  .hg-button-space {
-    background-color: white !important;
-  }
 }
 
 .show-keyboard {

themes/bootstrap3/scss/components/keyboard.scss

@@ -30,7 +30,7 @@
   }
 
   #keyboard-selection-button {
-    padding: 0 2px 0 4px !important;
+    padding: 0 2px 0 4px;
     .icon {
       margin: 0;
     }
@@ -61,25 +61,26 @@
   display: none;
   position: absolute;
   z-index: 1;
-  background-color: #dddddd !important;
-
+  &.hg-theme-default {
+    background-color: #dddddd;
+  }
 
-  .hg-functionBtn {
+  .hg-button.hg-functionBtn {
     font-weight: bold;
     font-size: 30px;
-    background-color: #f4f4f4 !important;
+    background-color: #f4f4f4;
     span {
       padding-top: 5px;
     }
+
+    &.hg-button-space {
+      background-color: white;
+    }
   }
 
   .hg-standardBtn {
     font-size: 18px;
   }
-
-  .hg-button-space {
-    background-color: white !important;
-  }
 }
 
 .show-keyboard {

themes/bootstrap3/templates/search/searchbox.phtml

@@ -102,7 +102,7 @@
     <div class="searchForm-query input-group">
       <input<?=$this->htmlAttributes($searchboxAttributes)?>>
       <div id="searchForm_controls">
-        <button id="searchForm-reset" class="searchForm-reset hidden" type="reset" tabindex="-1" aria-label="<?=$this->transEsc('searchform_reset_button')?>"><?=$this->icon('ui-reset-search');?></button>
+        <button id="searchForm-reset" class="searchForm-reset hidden" type="reset" tabindex="-1" aria-label="<?=$this->transEscAttr('searchform_reset_button')?>"><?=$this->icon('ui-reset-search');?></button>
         <?php if (!empty($keyboardLayouts)): ?>
           <?php
           $this->headScript()->appendFile('vendor/js.cookie.js');
@@ -121,7 +121,7 @@
               </li>
               <?php foreach ($keyboardLayouts as $keyboardLayout): ?>
                 <li>
-                  <a class="keyboard-selection-item" href="#" data-value="<?= $keyboardLayout ?>"><?= $this->transEsc($keyboardLayout) ?></a>
+                  <a class="keyboard-selection-item" href="#" data-value="<?= $this->escapeHtmlAttr($keyboardLayout) ?>"><?= $this->transEsc($keyboardLayout) ?></a>
                 </li>
               <?php endforeach; ?>
             </ul>