Merge pull request #728 from craftcms/a11y/make-code-containers-scrollable

Put overflowing containers in the focus order so they are keyboard-accessible

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();
+      });
     }
   },
 
@@ -284,6 +288,10 @@ export default {
       this.isSidebarOpen = false;
     });
 
+    this.$nextTick(function () {
+      makeOverflowingContainersFocusable();
+    });
+
     // temporary means of scrolling to URL hash on load
     // https://github.com/vuejs/vuepress/issues/2428
     const hash = document.location.hash;

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.