From 4cdb3c40a69d97a46e7b681b6f1ca29ca5ead7ad Mon Sep 17 00:00:00 2001 From: Akshay Antony <123446355+akshayaqburst@users.noreply.github.com> Date: Mon, 2 Dec 2024 17:56:29 +0530 Subject: [PATCH] fix: #7437, TabView: Unable to select closable icon of tabs through keyboard (#7438) * fix: #7437, TabView: Unable to select closable icon of tabs through keyboard * fix: #7437, TabView: Unable to select closable icon of tabs through keyboard * fix: #7437, TabView: Unable to select closable icon of tabs through keyboard --------- Co-authored-by: ANTONA09 --- components/lib/tabview/TabView.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js index e2433bbded..cd5a98fd27 100644 --- a/components/lib/tabview/TabView.js +++ b/components/lib/tabview/TabView.js @@ -330,6 +330,19 @@ export const TabView = React.forwardRef((inProps, ref) => { getElement: () => elementRef.current })); + const onCloseIconKeyDown = (event, index) => { + event.preventDefault(); + event.stopPropagation(); + + switch (event.code) { + case 'Space': + case 'NumpadEnter': + case 'Enter': + onTabHeaderClose(event, index); + break; + } + }; + const createTabHeader = (tab, index) => { const selected = isSelected(index); const { headerStyle, headerClassName, style: _style, className: _className, disabled, leftIcon, rightIcon, header, headerTemplate, closable, closeIcon } = TabPanelBase.getCProps(tab); @@ -348,7 +361,10 @@ export const TabView = React.forwardRef((inProps, ref) => { const closeIconProps = mergeProps( { className: cx('tab.closeIcon'), - onClick: (e) => onTabHeaderClose(e, index) + onClick: (e) => onTabHeaderClose(e, index), + onKeyDown: (e) => onCloseIconKeyDown(e, index), + tabIndex: 0, + 'aria-label': ariaLabel('close') || 'Close' }, getTabPT(tab, 'closeIcon', index) );