From 1ab0ff22b3791217344400fd7f3ef77ab23aa36d Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 14 Dec 2022 10:40:46 +0300
Subject: [PATCH 1/2] fixed focus on navigation through the navigation drawer

---
 .../shared/views/MainNavigationDrawer.vue     | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index c5065c49ac..c5f671fd73 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -17,7 +17,7 @@
         </VToolbarTitle>
       </VToolbar>
       <VList>
-        <VListTile :href="channelsLink">
+        <VListTile :href="channelsLink" :tabindex="handleclickTab">
           <VListTileAction>
             <Icon>home</Icon>
           </VListTileAction>
@@ -25,7 +25,7 @@
             <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>
@@ -42,7 +42,7 @@
             <VListTileTitle>{{ $tr('settingsLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="showLanguageModal = true">
+        <VListTile @click="showLanguageModal = true" :tabindex="handleclickTab">
           <VListTileAction>
             <Icon>language</Icon>
           </VListTileAction>
@@ -50,7 +50,10 @@
             <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>
@@ -58,7 +61,7 @@
             <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();

From a06a2bda20310a57f1f3d1aaa081acb435202d4e Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Fri, 16 Dec 2022 13:27:06 -0600
Subject: [PATCH 2/2] Updates main.less button styling with colored outline on
 focus and main navigation drawer component

---
 .../frontend/shared/styles/main.less          |  5 ++++
 .../shared/views/MainNavigationDrawer.vue     | 30 ++++++++++---------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.less b/contentcuration/contentcuration/frontend/shared/styles/main.less
index e930d93658..f1fbb398fe 100644
--- 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
index c5f671fd73..2ac62e285d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -9,7 +9,7 @@
       :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">
@@ -42,7 +42,7 @@
             <VListTileTitle>{{ $tr('settingsLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="showLanguageModal = true" :tabindex="handleclickTab">
+        <VListTile @click="showLanguageModal = true">
           <VListTileAction>
             <Icon>language</Icon>
           </VListTileAction>
@@ -50,10 +50,12 @@
             <VListTileTitle v-text="$tr('changeLanguage')" />
           </VListTileContent>
         </VListTile>
-        <VListTile :href="helpLink" 
-         :tabindex="handleclickTab" 
-         target="_blank"
-         @click="trackClick('Help')">
+        <VListTile
+          :href="helpLink" 
+          :tabindex="handleclickTab" 
+          target="_blank"
+          @click="trackClick('Help')"
+        >
           <VListTileAction>
             <Icon>open_in_new</Icon>
           </VListTileAction>
@@ -61,7 +63,7 @@
             <VListTileTitle>{{ $tr('helpLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="logout" :tabindex="handleclickTab">
+        <VListTile @click="logout">
           <VListTileAction>
             <Icon>exit_to_app</Icon>
           </VListTileAction>
@@ -128,6 +130,13 @@
       ...mapState({
         user: state => state.session.currentUser,
       }),
+      handleclickTab() {
+        if (this.value) {
+          return 0;
+        } else {
+          return -1;
+        }
+      },
       drawer: {
         get() {
           return this.value;
@@ -135,13 +144,6 @@
         set(value) {
           this.$emit('input', value);
         },
-        handleclickTab(){
-          if(this.value){
-            return 0;
-          }else{
-            return -1;
-          }
-        }
       },
       channelsLink() {
         return window.Urls.channels();