vuepress-theme-hope/lib/client/components/SkipLink.js

A light vuepress theme with tons of features

import { defineComponent, h, shallowRef } from "vue";
import { onContentUpdated } from "vuepress/client";
import { useThemeLocaleData } from "@theme-hope/composables/index";
import "../styles/skip-link.scss";
export default defineComponent({
    name: "SkipLink",
    props: {
        /** @description Content ID */
        content: {
            type: String,
            default: "main-content",
        },
    },
    setup(props) {
        const themeLocale = useThemeLocaleData();
        const skipToMainContent = shallowRef();
        const focusMainContent = ({ target }) => {
            const el = document.querySelector(target.hash);
            if (el) {
                const removeTabIndex = () => {
                    el.removeAttribute("tabindex");
                    el.removeEventListener("blur", removeTabIndex);
                };
                el.setAttribute("tabindex", "-1");
                el.addEventListener("blur", removeTabIndex);
                el.focus();
                window.scrollTo(0, 0);
            }
        };
        onContentUpdated(() => {
            skipToMainContent.value?.focus();
        });
        return () => [
            h("span", {
                ref: skipToMainContent,
                tabindex: "-1",
            }),
            h("a", {
                href: `#${props.content}`,
                class: "vp-skip-link sr-only",
                onClick: focusMainContent,
            }, themeLocale.value.routeLocales.skipToContent),
        ];
    },
});
//# sourceMappingURL=SkipLink.js.map