From 63aca76cbc472134fdca08b6e2f0d7fb03576b85 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Wed, 30 Aug 2023 16:01:50 -0700
Subject: [PATCH] enh(a11y): Use button as header menu trigger

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/components/NcHeaderMenu/NcHeaderMenu.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index d4d2c32443..a8ce82f710 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -68,10 +68,9 @@ export default {
 		v-click-outside="clickOutsideConfig"
 		:class="{ 'header-menu--opened': opened }"
 		class="header-menu">
-		<!-- Open trigger icon -->
-		<a ref="trigger"
-			class="header-menu__trigger"
-			href="#"
+		<!-- Trigger -->
+		<button ref="trigger"
+			class="header-menu__trigger button-vue"
 			:aria-label="ariaLabel"
 			:aria-controls="`header-menu-${id}`"
 			:aria-expanded="opened.toString()"
@@ -79,7 +78,7 @@ export default {
 			<!-- @slot Icon trigger slot. Make sure the svg path
 				is at least 16px. Usually mdi icon works at 20px -->
 			<slot name="trigger" />
-		</a>
+		</button>
 
 		<!-- Visual triangle -->
 		<div v-show="opened" class="header-menu__carret" />
@@ -293,6 +292,8 @@ $externalMargin: 8px;
 		padding: 0;
 		cursor: pointer;
 		opacity: .85;
+		background-color: transparent;
+		border: none;
 
 		// header is filled with primary or image background
 		filter: none !important;