3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): do not show tab content when tabbing over it; show after selection only (#8161)

Browse source
This commit is contained in:
mturoci 2022-10-05 19:10:08 +02:00 • committed by GitHub
parent 44af538153
commit b0d431af3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
View file

@ -104,7 +104,10 @@ function TabsComponent(props: Props): JSX.Element {
} }
const handleTabChange = ( const handleTabChange = (
event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>, event:
| React.FocusEvent<HTMLLIElement>
| React.MouseEvent<HTMLLIElement>
| React.KeyboardEvent<HTMLLIElement>,
) => { ) => {
const newTab = event.currentTarget; const newTab = event.currentTarget;
const newTabIndex = tabRefs.indexOf(newTab); const newTabIndex = tabRefs.indexOf(newTab);
@ -124,6 +127,10 @@ function TabsComponent(props: Props): JSX.Element {
let focusElement: HTMLLIElement | null = null; let focusElement: HTMLLIElement | null = null;
switch (event.key) { switch (event.key) {
case 'Enter': {
handleTabChange(event);
break;
}
case 'ArrowRight': { case 'ArrowRight': {
const nextTab = tabRefs.indexOf(event.currentTarget) + 1; const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
focusElement = tabRefs[nextTab] ?? tabRefs[0]!; focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
@ -161,7 +168,6 @@ function TabsComponent(props: Props): JSX.Element {
key={value} key={value}
ref={(tabControl) => tabRefs.push(tabControl)} ref={(tabControl) => tabRefs.push(tabControl)}
onKeyDown={handleKeydown} onKeyDown={handleKeydown}
onFocus={handleTabChange}
onClick={handleTabChange} onClick={handleTabChange}
{...attributes} {...attributes}
className={clsx( className={clsx(