Merge pull request #40314 from nextcloud/enh/a11y/search-labels

enh(a11y): Add search contacts label

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)
 		)
 	},

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>

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;