From a184615a70d71777ab84f69c5ea31622c67e5568 Mon Sep 17 00:00:00 2001
From: MasihTak <masihtak@outlook.com>
Date: Thu, 4 Nov 2021 12:52:39 +0100
Subject: [PATCH] fix : accessibility issue for the navigation

---
 .../generator/template-vue3/src/App.vue            | 14 +++++++-------
 .../generator/template/src/App.vue                 | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue b/packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue
index 1ca554712f..69d93f7d3c 100644
--- a/packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue
+++ b/packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue
@@ -8,10 +8,10 @@ replace:
 
 <%# REPLACE %>
 <template>
-  <div id="nav">
+  <nav>
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
-  </div>
+  </nav>
   <router-view/>
 </template>
 <%# END_REPLACE %>
@@ -24,20 +24,20 @@ replace:
 
 <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
   <%_ if (!rootOptions.cssPreprocessor) { _%>
-#nav {
+nav {
   padding: 30px;
 }
 
-#nav a {
+nav a {
   font-weight: bold;
   color: #2c3e50;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: #42b983;
 }
   <%_ } else { _%>
-#nav {
+nav {
   padding: 30px;
 
   a {
@@ -51,7 +51,7 @@ replace:
 }
   <%_ } _%>
 <%_ } else { _%>
-#nav
+nav
   padding 30px
   a
     font-weight bold
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/App.vue b/packages/@vue/cli-plugin-router/generator/template/src/App.vue
index 582a95833b..7d33737d7b 100644
--- a/packages/@vue/cli-plugin-router/generator/template/src/App.vue
+++ b/packages/@vue/cli-plugin-router/generator/template/src/App.vue
@@ -9,10 +9,10 @@ replace:
 <%# REPLACE %>
 <template>
   <div id="app">
-    <div id="nav">
+    <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </div>
+    </nav>
     <router-view/>
   </div>
 </template>
@@ -26,20 +26,20 @@ replace:
 
 <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
   <%_ if (!rootOptions.cssPreprocessor) { _%>
-#nav {
+nav {
   padding: 30px;
 }
 
-#nav a {
+nav a {
   font-weight: bold;
   color: #2c3e50;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: #42b983;
 }
   <%_ } else { _%>
-#nav {
+nav {
   padding: 30px;
 
   a {
@@ -53,7 +53,7 @@ replace:
 }
   <%_ } _%>
 <%_ } else { _%>
-#nav
+nav
   padding 30px
   a
     font-weight bold