Make overflowing code containers keyboard focusable on mount and route change

Author: gcamacho079

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

@@ -170,6 +170,7 @@ import {
   getPageWithRelativePath,
   fixDoubleSlashes,
   getSameContentForVersion,
+  makeOverflowingContainersFocusable,
 } from "../util";
 
 import { getStorage, setStorage, unsetStorage } from "../Storage";
@@ -187,7 +188,10 @@ export default {
 
   watch: {
     '$route.path'() {
-      this.$refs.backToTop.focus()
+      this.$refs.backToTop.focus();
+      this.$nextTick(function () {
+        makeOverflowingContainersFocusable();
+      });
     }
   },
 
@@ -282,18 +286,12 @@ export default {
 
     this.$router.afterEach(() => {
       this.isSidebarOpen = false;
-      this.$nextTick(() => {
-        this.makeScrollingCodeBlocksFocusable();
-      });
-      
     });
 
-    this.$nextTick(() => {
-      this.makeScrollingCodeBlocksFocusable();
+    this.$nextTick(function () {
+      makeOverflowingContainersFocusable();
     });
 
-    this.makeScrollingCodeBlocksFocusable();
-
     // temporary means of scrolling to URL hash on load
     // https://github.com/vuejs/vuepress/issues/2428
     const hash = document.location.hash;
@@ -374,14 +372,6 @@ 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;

docs/.vuepress/theme/util/index.js

@@ -623,6 +623,21 @@ function getAnchorHash(path) {
   return false;
 }
 
+/**
+ * Adds tabindex="0" to all containers (e.g., <pre>, <div>, etc.) that have overflowing content,
+ * making them focusable for keyboard navigation accessibility.
+ *
+ * This utility is typically used to improve accessibility for code blocks or other scrollable regions,
+ * allowing users to focus and scroll them using the keyboard.
+ */
+export function makeOverflowingContainersFocusable() {
+  document.querySelectorAll('pre,.toggle-tip .wrapper,.viewport.limit-height').forEach(el => {
+    if (el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight) {
+      el.setAttribute('tabindex', '0');
+    }
+  });
+}
+
 /**
  * Returns doc set base paths combinations with their configs,
  * accounting for set base, version, and/or language.