diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue index fa0bbea43..a3cbe82d4 100644 --- a/docs/.vuepress/theme/layouts/Layout.vue +++ b/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; diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js index 6d4a14616..b09739a71 100644 --- a/docs/.vuepress/theme/util/index.js +++ b/docs/.vuepress/theme/util/index.js @@ -623,6 +623,21 @@ function getAnchorHash(path) { return false; } +/** + * Adds tabindex="0" to all containers (e.g.,
,, 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.