3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-24 14:36:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: extract useSkipToContent() (#7269)

Browse source
This commit is contained in:
Sébastien Lorber 2022-04-29 19:16:02 +02:00 • committed by GitHub
parent fe286f1833
commit 3bef88232f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

32
packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
View file

@ -5,40 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useRef} from 'react';
import {useHistory} from '@docusaurus/router';
import React from 'react';
import Translate from '@docusaurus/Translate';
import {useLocationChange} from '@docusaurus/theme-common';
import {useSkipToContent} from '@docusaurus/theme-common';
import styles from './styles.module.css';
function programmaticFocus(el: HTMLElement) {
el.setAttribute('tabindex', '-1');
el.focus();
el.removeAttribute('tabindex');
}
export default function SkipToContent(): JSX.Element {
const containerRef = useRef<HTMLDivElement>(null);
const {action} = useHistory();
const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
const targetElement: HTMLElement | null =
document.querySelector('main:first-of-type') ||
document.querySelector('.main-wrapper');
if (targetElement) {
programmaticFocus(targetElement);
}
};
useLocationChange(({location}) => {
if (containerRef.current && !location.hash && action === 'PUSH') {
programmaticFocus(containerRef.current);
}
});
const {containerRef, handleSkip} = useSkipToContent();
return (
<div ref={containerRef} role="region">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}

2
packages/docusaurus-theme-common/src/index.ts
View file

@ -57,6 +57,8 @@ export {
useLayoutDocsSidebar,
} from './utils/docsUtils';
export {useSkipToContent} from './utils/a11yUtils';
export {useTitleFormatter} from './utils/generalUtils';
export {usePluralForm} from './utils/usePluralForm';

45
packages/docusaurus-theme-common/src/utils/a11yUtils.ts Normal file
View file

@ -0,0 +1,45 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import type React from 'react';
import {useCallback, useRef} from 'react';
import {useHistory} from '@docusaurus/router';
import {useLocationChange} from './useLocationChange';
import {ThemeClassNames} from './ThemeClassNames';
function programmaticFocus(el: HTMLElement) {
el.setAttribute('tabindex', '-1');
el.focus();
el.removeAttribute('tabindex');
}
export function useSkipToContent(): {
containerRef: React.RefObject<HTMLDivElement>;
handleSkip: (e: React.MouseEvent<HTMLAnchorElement>) => void;
} {
const containerRef = useRef<HTMLDivElement>(null);
const {action} = useHistory();
const handleSkip = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
const targetElement: HTMLElement | null =
document.querySelector('main:first-of-type') ||
document.querySelector(`.${ThemeClassNames.wrapper.main}`);
if (targetElement) {
programmaticFocus(targetElement);
}
}, []);
useLocationChange(({location}) => {
if (containerRef.current && !location.hash && action === 'PUSH') {
programmaticFocus(containerRef.current);
}
});
return {containerRef, handleSkip};
}