accessibility links in search field

src/components/Autocomplete.vue

@@ -25,7 +25,35 @@
         :dense="$vuetify.breakpoint.mobile"
       >
       <template v-slot:append>
+        <a class="accessibility_link" href="#main_content">Gå videre til hovedinnholdet</a>
+
+                <a href= "#menu_title"
+                  class="accessibility_link"
+                   @click="menuDialog=true"
+                   :aria-label="$t('menu.title')"
+                   aria-haspopup="true"
+                   :aria-expanded="menuDialog"
+                   
+               >
+            Åpne hovedmeny</a>
         
+        <v-dialog v-model="menuDialog">
+              <v-toolbar dense dark color="primary">
+              <v-toolbar-title id="menu_title">{{$t('menu.title')}}</v-toolbar-title><v-spacer></v-spacer>
+              <v-toolbar-items><v-divider vertical/>
+
+                <v-btn
+                    @click="menuDialog=false"
+                    dark
+                    text
+              >{{$t("close")}}
+                <v-icon right>close</v-icon>
+              </v-btn>
+            </v-toolbar-items>
+            </v-toolbar>
+        <Menu @close="menuDialog=false"/>
+                </v-dialog>
+                
         <v-menu allowOverflow: true offsetY>
         <template v-slot:activator="{ on, attrs }">
         <v-btn min-width="0px" 
@@ -44,38 +72,8 @@
           </v-list-item>
 
         </v-list>
+        
         </v-menu>
-            
-        <v-dialog max-width="1200" width="1200" v-model="menuDialog"
-        :close-on-content-click="false">
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn @click.native="items=[]"
-                   :aria-label="$t('menu.title')" 
-                   v-bind="attrs"
-                   v-on="on"
-                   min-width="0px" 
-                   class = "search-field-button" 
-                   plain 
-                   depressed 
-                   color = "primary" 
-                   text>
-              <span v-if="!$vuetify.breakpoint.mobile"></span><v-icon>more_vert</v-icon></v-btn>
-          </template>
-              <v-toolbar dense dark color="primary">
-              <v-toolbar-title>{{$t('menu.title')}}</v-toolbar-title><v-spacer></v-spacer>
-              <v-toolbar-items><v-divider vertical/>
-
-                <v-btn
-                    @click="menuDialog=false"
-                    dark
-                    text
-              >{{$t("close")}}
-                <v-icon right>close</v-icon>
-              </v-btn>
-            </v-toolbar-items>
-            </v-toolbar>
-        <Menu @close="menuDialog=false"/>
-                </v-dialog>
       </template>
      
       <template v-slot:item="data">
@@ -223,4 +221,19 @@ v-toolbar {
     padding-right: 0px !important;
     padding-left: 0px !important;
   }
+
+  .accessibility_link {
+  display: inline;
+  position: absolute;
+  left: -10000px;
+  }
+
+  .accessibility_link:focus {
+    position: absolute;
+    left: 48px;
+    top : 48px;
+    background-color: white;
+    padding: 10px;
+    z-index: 10000;
+  }
 </style>

src/components/Header.vue

@@ -2,7 +2,7 @@
 <template>
   <div class = "header">
     <span class="dict-label">{{dict_label}}</span>
-    <router-link  :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
+    <router-link id="main_content"  :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
     <span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></router-link>
     <h2 class="secondary_header" v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
     <span class="header_group_list" v-if="group_list.length">{{group_list}}</span>