3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-19 17:49:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

polish: bind key listener to light/dark toggle + a11y lint fixes (#5341)

Browse source 
* Fix Details a11y

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove keydown logic

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix toggle

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Proper way to fix toggle

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Proper way to fix details

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Put callback back

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>
This commit is contained in:
Joshua Chen 2021-08-12 22:33:31 +08:00 • committed by GitHub
parent cbff487516
commit 69b11a8546
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
View file

@ -53,6 +53,7 @@ const Toggle = memo(
'react-toggle--focus': focused,
'react-toggle--disabled': disabled,
})}>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
<div
className="react-toggle-track"
role="button"
@ -73,6 +74,11 @@ const Toggle = memo(
onClick={() => setChecked(!checked)}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
inputRef.current?.click();
}
}}
/>
</div>
);

7
packages/docusaurus-theme-common/src/components/Details/index.tsx
View file

@ -50,7 +50,11 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
styles.details,
{[styles.isClient]: isClient},
props.className,
)}
)}>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
<div
role="button"
tabIndex={0}
onMouseDown={(e) => {
const target = e.target as HTMLElement;
// Prevent a double-click to highlight summary text
@ -87,6 +91,7 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
}}>
<div className={styles.collapsibleContent}>{children}</div>
</Collapsible>
</div>
</details>
);
};