chore: making the sidebar button focusable and adding the aria label

Author: ktquez

layouts/Layout.vue

@@ -48,6 +48,7 @@ export default {
         this.setMainId()
         this.setWarningInExternalLinks()
         this.setComplementRouteToAnnouncer()
+        this.setTabIndexSidebarButton()
       })
     },
 
@@ -70,6 +71,13 @@ export default {
       if (this.$themeLocaleConfig.announcer) {
         this.$announcer.setComplementRoute(this.$themeLocaleConfig.announcer.complementRoute)
       }
+    },
+
+    setTabIndexSidebarButton () {
+      const el = document.querySelector('.sidebar-button')
+      if (!el) return
+      el.setAttribute('tabindex', 0)
+      el.setAttribute('aria-label', 'Open Sidebar Navigation')
     }
   }
 }

styles/override/index.styl

@@ -2,6 +2,7 @@
 @require './custom-block.styl'
 @require './search.styl'
 @require './sidebar.styl'
+@require './navbar.styl'
 
 .page-edit .edit-link > a
   color var(--text-color-link)

styles/override/sidebar.styl

@@ -1,6 +1,9 @@
+// SIDEBAR LINKS
 .sidebar-links
   > li
     margin: 6px 0
+    width: 95%
+    margin-left: 2.5%
 
     .sidebar-sub-headers
       margin-top: 5px
@@ -18,7 +21,20 @@ a.sidebar-link
   &.active
     border-left-color var(--accent-color)
 
+// SIDEBAR BUTTON
+.sidebar-button
+  padding: 1.2rem 1.3rem
+  top: 0.7rem
+  .icon
+    position: absolute
+
+// MOBILE
 @media (max-width: $MQMobile)
+  .sidebar-button
+    display: flex
+    justify-content: center
+    align-items: center
+
   .theme-container.sidebar-open .sidebar
     visibility: visible