diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue index 3a4ec69254d8525594d7a3060709b1df7bb24ede..f357e75264e0331af7a7aea87e986e9a1c749ccc 100644 --- a/src/components/Autocomplete.vue +++ b/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> diff --git a/src/components/Header.vue b/src/components/Header.vue index 247b61a56a46adf358fed9d6d4defc54589bae46..cc019ef2392167774e7a02e2a210b7918adac9c7 100644 --- a/src/components/Header.vue +++ b/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>