Updates main.less button styling with colored outline on focus and ma…

…in navigation drawer component
learningequality · Dec 16, 2022 · a06a2bd · a06a2bd
1 parent 1ab0ff2
commit a06a2bd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 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,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,26 +42,28 @@
             <VListTileTitle>{{ $tr('settingsLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="showLanguageModal = true" :tabindex="handleclickTab">
+        <VListTile @click="showLanguageModal = true">
           <VListTileAction>
             <Icon>language</Icon>
           </VListTileAction>
           <VListTileContent class="subheading">
             <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>
           <VListTileContent class="subheading">
             <VListTileTitle>{{ $tr('helpLink') }}</VListTileTitle>
           </VListTileContent>
         </VListTile>
-        <VListTile @click="logout" :tabindex="handleclickTab">
+        <VListTile @click="logout">
           <VListTileAction>
             <Icon>exit_to_app</Icon>
           </VListTileAction>
@@ -128,20 +130,20 @@
       ...mapState({
         user: state => state.session.currentUser,
       }),
+      handleclickTab() {
+        if (this.value) {
+          return 0;
+        } else {
+          return -1;
+        }
+      },
       drawer: {
         get() {
           return this.value;
         },
         set(value) {
           this.$emit('input', value);
         },
-        handleclickTab(){
-          if(this.value){
-            return 0;
-          }else{
-            return -1;
-          }
-        }
       },
       channelsLink() {
         return window.Urls.channels();