Merge pull request #3881 from AllanOXDi/keyboard_navigation

fixed focus on navigation through the navigation drawer
learningequality · Dec 16, 2022 · 2ca7157 · 2ca7157
2 parents 6745a78 + a06a2bd
commit 2ca7157
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.less b/contentcuration/contentcuration/frontend/shared/styles/main.less
@@ -46,6 +46,11 @@ body {
     max-width: 200px;
     text-align: center;
   }
+
+  .button:focus-visible,
+  .v-btn:focus-visible {
+    outline: 2px solid var(--v-secondary-base) !important;
+  }
 }
 
 /* RTL-related rules */

diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -9,23 +9,23 @@
       :right="$isRTL"
     >
       <VToolbar color="primary" dark>
-        <VBtn flat icon @click="drawer = false">
+        <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
           <Icon>clear</Icon>
         </VBtn>
         <VToolbarTitle class="notranslate">
           Kolibri Studio
         </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,7 +34,7 @@
           </VListTileContent>
 
         </VListTile>
-        <VListTile :href="settingsLink" @click="trackClick('Settings')">
+        <VListTile :href="settingsLink" :tabindex="handleclickTab" @click="trackClick('Settings')">
           <VListTileAction>
             <Icon>settings</Icon>
           </VListTileAction>
@@ -50,7 +50,12 @@
             <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>
@@ -73,12 +78,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>
@@ -123,6 +130,13 @@
       ...mapState({
         user: state => state.session.currentUser,
       }),
+      handleclickTab() {
+        if (this.value) {
+          return 0;
+        } else {
+          return -1;
+        }
+      },
       drawer: {
         get() {
           return this.value;