Add method to Layout.vue to make scrolling code blocks keyboard-focusable

Author: gcamacho079

docs/.vuepress/theme/layouts/Layout.vue

@@ -282,8 +282,18 @@ export default {
 
     this.$router.afterEach(() => {
       this.isSidebarOpen = false;
+      this.$nextTick(() => {
+        this.makeScrollingCodeBlocksFocusable();
+      });
+      
     });
 
+    this.$nextTick(() => {
+      this.makeScrollingCodeBlocksFocusable();
+    });
+
+    this.makeScrollingCodeBlocksFocusable();
+
     // temporary means of scrolling to URL hash on load
     // https://github.com/vuejs/vuepress/issues/2428
     const hash = document.location.hash;
@@ -364,6 +374,14 @@ export default {
   },
 
   methods: {
+    makeScrollingCodeBlocksFocusable() {
+      document.querySelectorAll('pre').forEach(el => {
+        if (el.scrollWidth > el.clientWidth) {
+          el.setAttribute('tabindex', '0');
+        }
+      });
+    },
+
     toggleSidebar(to) {
       this.temporarilyAnimateBody();
       this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen;