3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-21 18:47:50 +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>
);

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

@ -50,43 +50,48 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
styles.details,
{[styles.isClient]: isClient},
props.className,
)}
onMouseDown={(e) => {
const target = e.target as HTMLElement;
// Prevent a double-click to highlight summary text
if (isInSummary(target) && e.detail > 1) {
)}>
{/* 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
if (isInSummary(target) && e.detail > 1) {
e.preventDefault();
}
}}
onClick={(e) => {
e.stopPropagation(); // For isolation of multiple nested details/summary
const target = e.target as HTMLElement;
const shouldToggle =
isInSummary(target) && hasParent(target, detailsRef.current!);
if (!shouldToggle) {
return;
}
e.preventDefault();
}
}}
onClick={(e) => {
e.stopPropagation(); // For isolation of multiple nested details/summary
const target = e.target as HTMLElement;
const shouldToggle =
isInSummary(target) && hasParent(target, detailsRef.current!);
if (!shouldToggle) {
return;
}
e.preventDefault();
if (collapsed) {
setCollapsed(false);
setOpen(true);
} else {
setCollapsed(true);
// setOpen(false); // Don't do this, it breaks close animation!
}
}}>
{summary}
<Collapsible
lazy={false} // Content might matter for SEO in this case
collapsed={collapsed}
disableSSRStyle // Allows component to work fine even with JS disabled!
onCollapseTransitionEnd={(newCollapsed) => {
setCollapsed(newCollapsed);
setOpen(!newCollapsed);
if (collapsed) {
setCollapsed(false);
setOpen(true);
} else {
setCollapsed(true);
// setOpen(false); // Don't do this, it breaks close animation!
}
}}>
<div className={styles.collapsibleContent}>{children}</div>
</Collapsible>
{summary}
<Collapsible
lazy={false} // Content might matter for SEO in this case
collapsed={collapsed}
disableSSRStyle // Allows component to work fine even with JS disabled!
onCollapseTransitionEnd={(newCollapsed) => {
setCollapsed(newCollapsed);
setOpen(!newCollapsed);
}}>
<div className={styles.collapsibleContent}>{children}</div>
</Collapsible>
</div>
</details>
);
};