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

enh(a11y): Add search contacts label
nextcloud · Sep 8, 2023 · ce59e55 · ce59e55
2 parents 149e2a0 + 3695545
commit ce59e55
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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;

diff --git a/dist/core-login.js b/dist/core-login.js
diff --git a/dist/core-login.js.map b/dist/core-login.js.map
diff --git a/dist/core-main.js b/dist/core-main.js
diff --git a/dist/core-main.js.map b/dist/core-main.js.map