enh(a11y): Add nav to header menu

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

src/components/NcHeaderMenu/NcHeaderMenu.vue

@@ -64,8 +64,10 @@ export default {
 </docs>
 
 <template>
-	<div :id="id"
+	<component :is="wrapperTag"
+		:id="id"
 		v-click-outside="clickOutsideConfig"
+		:aria-label="isNav ? navAriaLabel : null"
 		:class="{ 'header-menu--opened': opened }"
 		class="header-menu">
 		<!-- Open trigger icon -->
@@ -87,14 +89,13 @@ export default {
 		<!-- Menu opened content -->
 		<div v-show="opened"
 			:id="`header-menu-${id}`"
-			class="header-menu__wrapper"
-			role="menu">
+			class="header-menu__wrapper">
 			<div ref="content" class="header-menu__content">
 				<!-- @slot Main content -->
 				<slot />
 			</div>
 		</div>
-	</div>
+	</component>
 </template>
 
 <script>
@@ -139,6 +140,24 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Pass `true` if the header menu is used for website navigation
+		 *
+		 * The wrapper tag will be set to `nav`
+		 */
+		isNav: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * aria-label attribute of the `nav` element
+		 */
+		navAriaLabel: {
+			type: String,
+			default: null,
+		},
 	},
 
 	emits: [
@@ -159,6 +178,10 @@ export default {
 	},
 
 	computed: {
+		wrapperTag() {
+			return this.isNav ? 'nav' : 'div'
+		},
+
 		clickOutsideConfig() {
 			return [
 				this.closeMenu,
@@ -359,5 +382,4 @@ $externalMargin: 8px;
 		}
 	}
 }
-
 </style>