fixed focus on navigation through the navigation drawer

learningequality · Dec 14, 2022 · 1ab0ff2 · 1ab0ff2
1 parent 6a10c68
commit 1ab0ff2
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -17,15 +17,15 @@
         </VToolbarTitle>
       </VToolbar>
       <VList>
-        <VListTile :href="channelsLink">
+        <VListTile :href="channelsLink" :tabindex="handleclickTab">
           <VListTileAction>
             <Icon>home</Icon>
           </VListTileAction>
           <VListTileContent class="subheading">
             <VListTileTitle>{{ $tr('channelsLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile v-if="user.is_admin" :href="administrationLink">
+        <VListTile v-if="user.is_admin" :href="administrationLink" :tabindex="handleclickTab">
           <VListTileAction>
             <Icon>people</Icon>
           </VListTileAction>
@@ -34,31 +34,34 @@
           </VListTileContent>
 
         </VListTile>
-        <VListTile :href="settingsLink" @click="trackClick('Settings')">
+        <VListTile :href="settingsLink" :tabindex="handleclickTab" @click="trackClick('Settings')">
           <VListTileAction>
             <Icon>settings</Icon>
           </VListTileAction>
           <VListTileContent class="subheading">
             <VListTileTitle>{{ $tr('settingsLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="showLanguageModal = true">
+        <VListTile @click="showLanguageModal = true" :tabindex="handleclickTab">
           <VListTileAction>
             <Icon>language</Icon>
           </VListTileAction>
           <VListTileContent class="subheading">
             <VListTileTitle v-text="$tr('changeLanguage')" />
           </VListTileContent>
         </VListTile>
-        <VListTile :href="helpLink" target="_blank" @click="trackClick('Help')">
+        <VListTile :href="helpLink" 
+         :tabindex="handleclickTab" 
+         target="_blank"
+         @click="trackClick('Help')">
           <VListTileAction>
             <Icon>open_in_new</Icon>
           </VListTileAction>
           <VListTileContent class="subheading">
             <VListTileTitle>{{ $tr('helpLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="logout">
+        <VListTile @click="logout" :tabindex="handleclickTab">
           <VListTileAction>
             <Icon>exit_to_app</Icon>
           </VListTileAction>
@@ -73,12 +76,14 @@
           :text="$tr('copyright', { year: new Date().getFullYear() })"
           href="https://learningequality.org/"
           target="_blank"
+          :tabindex="handleclickTab"
         />
         <p class="mt-4">
           <ActionLink
             href="https://community.learningequality.org/c/support/studio"
             target="_blank"
             :text="$tr('giveFeedback')"
+            :tabindex="handleclickTab"
           />
         </p>
       </VContainer>
@@ -130,6 +135,13 @@
         set(value) {
           this.$emit('input', value);
         },
+        handleclickTab(){
+          if(this.value){
+            return 0;
+          }else{
+            return -1;
+          }
+        }
       },
       channelsLink() {
         return window.Urls.channels();