Fix missing label and accessibility of Search function

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

Author: jancborchardt

core/src/components/HeaderMenu.vue

@@ -27,13 +27,14 @@
 		class="header-menu">
 		<a class="header-menu__trigger"
 			href="#"
+			:aria-label="ariaLabel"
 			:aria-controls="`header-menu-${id}`"
 			:aria-expanded="opened"
-			aria-haspopup="true"
+			aria-haspopup="menu"
 			@click.prevent="toggleMenu">
 			<slot name="trigger" />
 		</a>
-		<div v-if="opened"
+		<div v-show="opened"
 			:id="`header-menu-${id}`"
 			class="header-menu__wrapper"
 			role="menu">
@@ -65,6 +66,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		ariaLabel: {
+			type: String,
+			default: '',
+		},
 		open: {
 			type: Boolean,
 			default: false,

core/src/views/UnifiedSearch.vue

@@ -24,13 +24,13 @@
 		class="unified-search"
 		exclude-click-outside-classes="popover"
 		:open.sync="open"
+		:aria-label="ariaLabel"
 		@open="onOpen"
 		@close="onClose">
 		<!-- Header icon -->
 		<template #trigger>
 			<Magnify class="unified-search__trigger"
 				:size="20"
-				:title="ariaLabel"
 				fill-color="var(--color-primary-text)" />
 		</template>