From 493602db37d2d75e0ffe67c85733f2383b107651 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 21 Mar 2024 15:47:42 -0500 Subject: [PATCH 01/17] fix(tabs): refactor dismissable tab html --- packages/react/src/components/Tabs/Tabs.tsx | 123 ++++++++++-------- .../styles/scss/components/tabs/_tabs.scss | 84 ++++++------ 2 files changed, 115 insertions(+), 92 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index c058ce31a4dc..c2f134d8a229 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -353,6 +353,7 @@ function TabList({ [`${prefix}--layout--size-lg`]: iconSize === 'lg', [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs, [`${prefix}--tabs--full-width`]: distributeWidth, + [`${prefix}--tabs--dismissable`]: dismissable, }, customClassName ); @@ -858,71 +859,83 @@ const Tab = forwardRef(function Tab( onKeyDown?.(event); }; + // always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state const DismissIcon = (
- + })}> +
); const hasIcon = Icon ?? dismissable; return ( - { - if (disabled) { - return; - } - setSelectedIndex(index); - onClick?.(evt); - }} - onKeyDown={handleKeyDown} - tabIndex={selectedIndex === index ? '0' : '-1'} - type="button"> -
- {dismissable && Icon && ( -
- {} -
- )} - {children} - {/* always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state */} -
- {DismissIcon} - {!dismissable && Icon && } + <> + { + if (disabled) { + return; + } + setSelectedIndex(index); + onClick?.(evt); + }} + onKeyDown={handleKeyDown} + tabIndex={selectedIndex === index ? '0' : '-1'} + type="button"> +
+ {dismissable && Icon && ( +
+ {} +
+ )} + {children} + {!dismissable && Icon && ( +
+ {!dismissable && Icon && } +
+ )}
-
- {hasSecondaryLabel && secondaryLabel && ( - - {secondaryLabel} - - )} - + {hasSecondaryLabel && secondaryLabel && ( + + {secondaryLabel} + + )} + + {DismissIcon} + ); }); Tab.propTypes = { diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index a1a2b372eda0..90bb15ceb516 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -277,14 +277,16 @@ &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item { background-color: $layer-accent; + // Draws the border without affecting the inner-content + box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong; + margin-inline-start: 0; } &.#{$prefix}--tabs--contained - .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item--selected + + div + .#{$prefix}--tabs__nav-item { - // Draws the border without affecting the inner-content - box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong; - margin-inline-start: 0; + box-shadow: convert.to-rem(-1px) 0 0 0 transparent; } .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link { @@ -293,57 +295,65 @@ outline $duration-fast-01 motion(standard, productive); } + &.#{$prefix}--tabs--dismissable .#{$prefix}--tabs__nav-link { + // 16px normal right padding plus width of the icon which is 24px + // TODO this value + padding-inline-end: 40px; + } + + &.#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained + .#{$prefix}--tabs__nav-link { + //TODO this value + padding-inline-end: 47px; + } + //----------------------------- // Icon //----------------------------- - &.#{$prefix}--tabs--contained - .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled) - .#{$prefix}--tabs__nav-item--icon - .#{$prefix}--tabs__nav-item--close-icon { - &:hover { - background-color: inherit; - } + .#{$prefix}--tabs__nav-item--close { + position: relative; + display: flex; + align-items: center; + //TODO these values + inset-inline-start: -13px; + margin-inline-start: -23px; + } + + .#{$prefix}--tabs__nav-item--close-icon { + border: none; + background-color: transparent; + block-size: convert.to-rem(24px); + inline-size: convert.to-rem(24px); + line-height: 0; + padding-block: $spacing-02; + padding-inline: $spacing-02; + pointer-events: auto; svg { - padding: $spacing-02; - margin: -$spacing-02; - block-size: 24px; - inline-size: 24px; + block-size: convert.to-rem(16px); + inline-size: convert.to-rem(16px); } - svg:hover { - background-color: $layer-accent-hover; + &:hover { + background-color: $layer-hover; } } - &.#{$prefix}--tabs--contained - .#{$prefix}--tabs__nav-item:not( - .#{$prefix}--tabs__nav-item--disabled - ).#{$prefix}--tabs__nav-item--selected - .#{$prefix}--tabs__nav-item--icon - .#{$prefix}--tabs__nav-item--close-icon - svg:hover { - background-color: $layer-hover; - } + .#{$prefix}--tabs__nav-item--close-icon--disabled, + .#{$prefix}--tabs__nav-item--close-icon--disabled:hover { + background-color: inherit; + cursor: not-allowed; - .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled) - .#{$prefix}--tabs__nav-item--icon - .#{$prefix}--tabs__nav-item--close-icon:hover { - background-color: $background-hover; + svg { + fill: $tab-text-disabled; + } } .#{$prefix}--tabs__nav-item--icon { display: flex; align-items: center; padding-inline-start: $spacing-03; - - .#{$prefix}--tabs__nav-item--close-icon { - padding: $spacing-02; - margin: -$spacing-02; - line-height: 0; - pointer-events: auto; - } } .#{$prefix}--tabs__nav-item--icon-left { From ec60bd64a0b435638523d60dc6087ae077734254 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 22 Mar 2024 08:03:49 -0500 Subject: [PATCH 02/17] fix: typescript --- packages/react/src/components/Tabs/Tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index c2f134d8a229..9819c52dbf98 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -810,7 +810,7 @@ const Tab = forwardRef(function Tab( onTabCloseRequest, } = React.useContext(TabsContext); const { index, hasSecondaryLabel, contained } = React.useContext(TabContext); - const dismissIconRef = useRef(null); + const dismissIconRef = useRef(null); const tabRef = useRef(null); const ref = useMergedRefs([forwardRef, tabRef]); const [ignoreHover, setIgnoreHover] = useState(false); From 90e16881d990249db7956f9f6239be603f8c06cf Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 22 Mar 2024 08:35:25 -0500 Subject: [PATCH 03/17] feat: add button reset, active state and fix number values --- packages/react/src/components/Tabs/Tabs.tsx | 2 + .../styles/scss/components/tabs/_tabs.scss | 40 ++++++++++++++----- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 9819c52dbf98..777389c52379 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -872,6 +872,8 @@ const Tab = forwardRef(function Tab( aria-hidden={selectedIndex === index ? 'false' : 'true'} className={cx(`${prefix}--tabs__nav-item--close-icon`, { [`${prefix}--visually-hidden`]: !dismissable, + [`${prefix}--tabs__nav-item--close-icon--selected`]: + selectedIndex === index, [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled, })} onClick={handleClose} diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index 90bb15ceb516..6576a7175f4e 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -296,15 +296,12 @@ } &.#{$prefix}--tabs--dismissable .#{$prefix}--tabs__nav-link { - // 16px normal right padding plus width of the icon which is 24px - // TODO this value - padding-inline-end: 40px; + padding-inline-end: $spacing-08; } &.#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link { - //TODO this value - padding-inline-end: 47px; + padding-inline-end: calc($spacing-09 - 1px); } //----------------------------- @@ -315,29 +312,50 @@ position: relative; display: flex; align-items: center; - //TODO these values - inset-inline-start: -13px; - margin-inline-start: -23px; + inset-inline-start: calc(-#{$spacing-04} - 1px); + margin-inline-start: calc(-#{$spacing-06} + 1px); } .#{$prefix}--tabs__nav-item--close-icon { - border: none; - background-color: transparent; + @include button-reset.reset(); + block-size: convert.to-rem(24px); inline-size: convert.to-rem(24px); - line-height: 0; padding-block: $spacing-02; padding-inline: $spacing-02; pointer-events: auto; svg { block-size: convert.to-rem(16px); + fill: $text-secondary; inline-size: convert.to-rem(16px); } + svg:hover { + fill: $text-primary; + } + &:hover { background-color: $layer-hover; } + + &:focus, + &:active { + @include focus-outline('outline'); + } + } + + .#{$prefix}--tabs__nav-item:hover + + .#{$prefix}--tabs__nav-item--close + .#{$prefix}--tabs__nav-item--close-icon + svg { + fill: $text-primary; + } + + .#{$prefix}--tabs__nav-item--close-icon--selected { + svg { + fill: $text-primary; + } } .#{$prefix}--tabs__nav-item--close-icon--disabled, From da5d69b64429e4e01110ea92897f7159a139220f Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 22 Mar 2024 09:33:09 -0500 Subject: [PATCH 04/17] fix: disabled styles --- packages/react/src/components/Tabs/Tabs.tsx | 2 ++ packages/styles/scss/components/tabs/_tabs.scss | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 777389c52379..c72326a184d7 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -869,7 +869,9 @@ const Tab = forwardRef(function Tab(
From 2492f62273ca3a1b6300e66a34d5fcec6efacc62 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 28 Mar 2024 12:23:36 -0500 Subject: [PATCH 08/17] chore: code comments --- packages/react/src/components/Tabs/Tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index e5c08478b70f..90e0bf91a970 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -859,7 +859,6 @@ const Tab = forwardRef(function Tab( onKeyDown?.(event); }; - // always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state const DismissIcon = (
(function Tab( )} + {/* always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state */} {DismissIcon} ); From c5bfca3ca8a66de6b5ba4748e7c0167973ae884c Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 29 Mar 2024 09:10:30 -0500 Subject: [PATCH 09/17] fix: tests --- packages/react/src/components/Tabs/Tabs-test.js | 14 ++++++++------ packages/react/src/components/Tabs/Tabs.tsx | 4 +++- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js index a384ea368ac3..32ee5f474509 100644 --- a/packages/react/src/components/Tabs/Tabs-test.js +++ b/packages/react/src/components/Tabs/Tabs-test.js @@ -264,7 +264,8 @@ describe('Tab', () => { expect( // eslint-disable-next-line testing-library/no-node-access - screen.getAllByLabelText('Press delete to close tab')[0].parentElement + screen.getAllByLabelText('Press delete to remove Tab Label 1 tab')[0] + .parentElement ).not.toHaveClass(`${prefix}--visually-hidden`); }); @@ -286,7 +287,8 @@ describe('Tab', () => { expect( // eslint-disable-next-line testing-library/no-node-access - screen.queryAllByLabelText('Press delete to close tab')[0].parentElement + screen.queryAllByLabelText('Press delete to remove Tab Label 1 tab')[0] + .parentElement ).toHaveClass(`${prefix}--visually-hidden`); }); @@ -307,7 +309,7 @@ describe('Tab', () => { ); await userEvent.click( - screen.getAllByLabelText('Press delete to close tab')[0] + screen.getAllByLabelText('Press delete to remove Tab Label 1 tab')[0] ); expect(onTabCloseRequest).toHaveBeenCalledTimes(1); }); @@ -329,7 +331,7 @@ describe('Tab', () => { ); await userEvent.click( - screen.getAllByLabelText('Press delete to close tab')[0] + screen.getAllByLabelText('Press delete to remove Tab Label 1 tab')[0] ); expect(onTabCloseRequest).not.toHaveBeenCalled(); }); @@ -421,7 +423,7 @@ describe('Tab', () => { ); expect( - screen.getAllByLabelText('Press delete to close tab')[0] + screen.getAllByLabelText('Press delete to remove Tab Label 1 tab')[0] ).not.toHaveClass(`${prefix}--visaully-hidden`); }); @@ -442,7 +444,7 @@ describe('Tab', () => { ); expect( - screen.getAllByLabelText('Press delete to close tab')[0] + screen.getAllByLabelText('Press delete to remove Tab Label 1 tab')[0] ).not.toHaveClass(`${prefix}--visaully-hidden`); expect(screen.getByTestId('svg')).toBeInTheDocument(); // eslint-disable-next-line testing-library/no-node-access diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 90e0bf91a970..d6743b5588f0 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -882,7 +882,9 @@ const Tab = forwardRef(function Tab( title={`Remove ${typeof children === 'string' ? children : ''} tab`} ref={dismissIconRef}> Date: Fri, 29 Mar 2024 10:48:14 -0500 Subject: [PATCH 10/17] fix: set focus after removing tab --- packages/react/src/components/Tabs/Tabs.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index d6743b5588f0..f0f29eee0783 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -850,6 +850,10 @@ const Tab = forwardRef(function Tab( const handleClose = (evt) => { evt.stopPropagation(); onTabCloseRequest?.(index); + setSelectedIndex(index); + if (tabRef.current) { + tabRef.current.focus(); + } }; const handleKeyDown = (event) => { From 11c51eb26d179983f92499c86b7441e14bf256bb Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 29 Mar 2024 10:54:20 -0500 Subject: [PATCH 11/17] fix: focus --- packages/react/src/components/Tabs/Tabs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index f0f29eee0783..22c215e48f23 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -850,7 +850,6 @@ const Tab = forwardRef(function Tab( const handleClose = (evt) => { evt.stopPropagation(); onTabCloseRequest?.(index); - setSelectedIndex(index); if (tabRef.current) { tabRef.current.focus(); } From 5130dac853a9304218b00d5c2737e75517c11746 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 2 Apr 2024 12:01:46 -0500 Subject: [PATCH 12/17] fix: set focus to active tab --- packages/react/src/components/Tabs/Tabs.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 22c215e48f23..5778af4845d5 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -850,8 +850,17 @@ const Tab = forwardRef(function Tab( const handleClose = (evt) => { evt.stopPropagation(); onTabCloseRequest?.(index); - if (tabRef.current) { - tabRef.current.focus(); + + if (tabRef.current && tabRef.current.parentElement) { + if (selectedIndex === index) { + (tabRef.current.parentElement.childNodes[0] as HTMLElement)?.focus(); + } else { + ( + tabRef.current.parentElement.childNodes[ + selectedIndex * 2 + ] as HTMLElement + )?.focus(); + } } }; From 8231e44bff58dd32d180bf360ccab7be2c96504e Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 2 Apr 2024 12:34:42 -0500 Subject: [PATCH 13/17] feat: update focus state after removing tab --- packages/react/src/components/Tabs/Tabs.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 5778af4845d5..f87ef92c1508 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -851,14 +851,13 @@ const Tab = forwardRef(function Tab( evt.stopPropagation(); onTabCloseRequest?.(index); + const tabFocusIndex = (index - 1) * 2; if (tabRef.current && tabRef.current.parentElement) { - if (selectedIndex === index) { + if (index === 0) { (tabRef.current.parentElement.childNodes[0] as HTMLElement)?.focus(); } else { ( - tabRef.current.parentElement.childNodes[ - selectedIndex * 2 - ] as HTMLElement + tabRef.current.parentElement.childNodes[tabFocusIndex] as HTMLElement )?.focus(); } } From 216b7274920a18093c8111f10c31c8248095313b Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 2 Apr 2024 13:00:02 -0500 Subject: [PATCH 14/17] chore: add code comments --- packages/react/src/components/Tabs/Tabs.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index f87ef92c1508..0f079111f5b4 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -851,6 +851,9 @@ const Tab = forwardRef(function Tab( evt.stopPropagation(); onTabCloseRequest?.(index); + // We focus the tab previous to the tab removed; we -1 from the index then + // multiply by 2 to account for the fact that each tab has two children, + // the tab button and the remove button const tabFocusIndex = (index - 1) * 2; if (tabRef.current && tabRef.current.parentElement) { if (index === 0) { From 663e76206eefbfe5286db7faba0d28f88e0b2cb4 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 3 Apr 2024 07:57:55 -0500 Subject: [PATCH 15/17] fix: focus updates --- packages/react/src/components/Tabs/Tabs.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 0f079111f5b4..ed393b6087f1 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -851,18 +851,8 @@ const Tab = forwardRef(function Tab( evt.stopPropagation(); onTabCloseRequest?.(index); - // We focus the tab previous to the tab removed; we -1 from the index then - // multiply by 2 to account for the fact that each tab has two children, - // the tab button and the remove button - const tabFocusIndex = (index - 1) * 2; - if (tabRef.current && tabRef.current.parentElement) { - if (index === 0) { - (tabRef.current.parentElement.childNodes[0] as HTMLElement)?.focus(); - } else { - ( - tabRef.current.parentElement.childNodes[tabFocusIndex] as HTMLElement - )?.focus(); - } + if (tabRef.current) { + tabRef.current.focus(); } }; From 298f3610e6e0d115ccf43599ed2c84ed593b826b Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 3 Apr 2024 08:34:19 -0500 Subject: [PATCH 16/17] fix: focus states --- packages/react/src/components/Tabs/Tabs.tsx | 26 +++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index ed393b6087f1..fbbd3ddc09e5 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -851,8 +851,30 @@ const Tab = forwardRef(function Tab( evt.stopPropagation(); onTabCloseRequest?.(index); - if (tabRef.current) { - tabRef.current.focus(); + // set focus to corret tab after removing tab + if (tabRef.current && tabRef.current.parentElement) { + // determine number of tabs, excluding disabled + const tabCount = Array.from( + tabRef.current.parentElement.childNodes + ).filter((node) => { + const element = node as HTMLElement; + return ( + element.classList.contains('cds--tabs__nav-link') && + !element.classList.contains('cds--tabs__nav-item--disabled') + ); + }).length; + + // if not removing last tab focus on next tab + if (tabRef.current && index + 1 !== tabCount) { + tabRef.current.focus(); + } + // if removing last tab focus on previous tab + else { + const prevTabIndex = (tabCount - 2) * 2; + ( + tabRef.current.parentElement.childNodes[prevTabIndex] as HTMLElement + )?.focus(); + } } }; From d5bc681afed9cbc18545e1a62ad1fc2926adf365 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 8 Apr 2024 07:55:27 -0500 Subject: [PATCH 17/17] Update packages/react/src/components/Tabs/Tabs.tsx --- packages/react/src/components/Tabs/Tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index fbbd3ddc09e5..fab0367b0588 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -851,7 +851,7 @@ const Tab = forwardRef(function Tab( evt.stopPropagation(); onTabCloseRequest?.(index); - // set focus to corret tab after removing tab + // set focus after removing tab if (tabRef.current && tabRef.current.parentElement) { // determine number of tabs, excluding disabled const tabCount = Array.from(