enh(a11y): Add search contacts label

Signed-off-by: Christopher Ng <chrng8@gmail.com>

3 files changed, 10 insertions, 4 deletions

diff --git a/core/src/OC/contactsmenu.js b/core/src/OC/contactsmenu.js
index f5a6f782db0..61fe3b49506 100644
--- a/core/src/OC/contactsmenu.js
+++ b/core/src/OC/contactsmenu.js
@@ -294,7 +294,7 @@ const ContactsMenuView = View.extend({
 	contentTemplate: function(data) {
 		return this.templates.menu(
 			_.extend({
-				searchContactsText: t('core', 'Search contacts …')
+				searchContactsLabel: t('core', 'Search contacts'),
 			}, data)
 		)
 	},
diff --git a/core/src/OC/contactsmenu/menu.handlebars b/core/src/OC/contactsmenu/menu.handlebars
index 7d7697e780c..89135c23d37 100644
--- a/core/src/OC/contactsmenu/menu.handlebars
+++ b/core/src/OC/contactsmenu/menu.handlebars
@@ -1,4 +1,4 @@
-<label class="hidden-visually" for="contactsmenu-search">{{searchContactsText}}</label>
-<input id="contactsmenu-search" type="search" placeholder="{{searchContactsText}}" value="{{searchTerm}}">
+<label for="contactsmenu-search">{{searchContactsLabel}}</label>
+<input id="contactsmenu-search" type="search" value="{{searchTerm}}">
 <div class="content">
 </div>
diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue
index 5d034785558..03ea5a08e79 100644
--- a/core/src/views/ContactsMenu.vue
+++ b/core/src/views/ContactsMenu.vue
@@ -71,7 +71,7 @@ export default {
 #contactsmenu-menu {
 	/* show 2.5 to 4.5 entries depending on the screen height */
 	height: calc(100vh - 50px * 3);
-	max-height: calc(50px * 6 + 2px);
+	max-height: calc(50px * 6 + 2px + 26px);
 	min-height: calc(50px * 3.5);
 	width: 350px;
 
@@ -85,6 +85,12 @@ export default {
 			}
 		}
 
+		label[for="contactsmenu-search"] {
+			font-weight: bold;
+			font-size: 19px;
+			margin-left: 22px;
+		}
+
 		#contactsmenu-search {
 			width: calc(100% - 16px);
 			margin: 8px;