From 8af94d9b16af9e20325ecb01e4d4e6a5f868e52d Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 9 Oct 2025 12:39:59 +0200 Subject: [PATCH 1/4] Added as prop to NavTabs to optimice anchor functionalities --- packages/lib/src/nav-tabs/Tab.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index ac262c18c..a7d3a1638 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -13,10 +13,12 @@ const TabContainer = styled.div` flex-direction: column; `; -const TabLink = styled.a<{ - disabled: TabProps["disabled"]; - iconPosition: NavTabsPropsType["iconPosition"]; -}>` +const TabLink = styled.div< + { + disabled: TabProps["disabled"]; + iconPosition: NavTabsPropsType["iconPosition"]; + } & React.AnchorHTMLAttributes +>` box-sizing: border-box; display: flex; flex-direction: ${({ iconPosition }) => (iconPosition === "top" ? "column" : "row")}; @@ -96,11 +98,11 @@ const Tab = forwardRef( notificationNumber = false, ...otherProps }: TabProps, - ref: Ref + ref: Ref ) => { const { iconPosition, tabIndex, focusedLabel } = useContext(NavTabsContext) ?? {}; - const tabRef = useRef(); - const innerRef = useRef(null); + const tabRef = useRef(); + const innerRef = useRef(null); useImperativeHandle(ref, () => innerRef.current!, []); useEffect(() => { @@ -109,7 +111,7 @@ const Tab = forwardRef( } }, [children, focusedLabel]); - const handleOnKeyDown = (event: KeyboardEvent) => { + const handleOnKeyDown = (event: KeyboardEvent) => { switch (event.key) { case " ": case "Enter": @@ -128,12 +130,13 @@ const Tab = forwardRef( aria-disabled={disabled} aria-selected={active} disabled={disabled} + as={!disabled && href ? "a" : "div"} href={!disabled ? href : undefined} + onClick={!disabled ? onClick : undefined} iconPosition={iconPosition} - onClick={onClick} onKeyDown={handleOnKeyDown} - ref={(anchorRef: HTMLAnchorElement) => { - tabRef.current = anchorRef; + ref={(anchorRef) => { + tabRef.current = anchorRef as HTMLAnchorElement | HTMLDivElement; if (ref) { if (typeof ref === "function") ref(anchorRef); else innerRef.current = anchorRef; From 30cb649abdd1606353520eab7c2954ef475f61e7 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 9 Oct 2025 12:48:52 +0200 Subject: [PATCH 2/4] Remove disabled condition to href & s properties --- packages/lib/src/nav-tabs/Tab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index a7d3a1638..e73e5cc21 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -130,8 +130,8 @@ const Tab = forwardRef( aria-disabled={disabled} aria-selected={active} disabled={disabled} - as={!disabled && href ? "a" : "div"} - href={!disabled ? href : undefined} + as={href ? "a" : "div"} + href={href} onClick={!disabled ? onClick : undefined} iconPosition={iconPosition} onKeyDown={handleOnKeyDown} From 02b64c28d37e5f6fbd1e5026adec4e45d59af38a Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 9 Oct 2025 12:59:53 +0200 Subject: [PATCH 3/4] Condition on disabled to pass href --- packages/lib/src/nav-tabs/Tab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index e73e5cc21..91eb481bb 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -131,7 +131,7 @@ const Tab = forwardRef( aria-selected={active} disabled={disabled} as={href ? "a" : "div"} - href={href} + href={!disabled ? href : undefined} onClick={!disabled ? onClick : undefined} iconPosition={iconPosition} onKeyDown={handleOnKeyDown} From 58479f6f5e75affa273916adc52148f9afa58f05 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 10 Oct 2025 08:53:27 +0200 Subject: [PATCH 4/4] Resolved comments & added React.AnchorHTMLAttributes to Card.tsx --- packages/lib/src/card/Card.tsx | 13 +++++++------ packages/lib/src/nav-tabs/Tab.tsx | 8 ++++---- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/lib/src/card/Card.tsx b/packages/lib/src/card/Card.tsx index 1723c5b6c..2990318c1 100644 --- a/packages/lib/src/card/Card.tsx +++ b/packages/lib/src/card/Card.tsx @@ -3,12 +3,13 @@ import styled from "@emotion/styled"; import { spaces } from "../common/variables"; import CardPropsType from "./types"; -const Card = styled.div<{ - hasAction: boolean; - margin: CardPropsType["margin"]; - shadowDepth: 0 | 1 | 2; - href?: string; -}>` +const Card = styled.div< + { + hasAction: boolean; + margin: CardPropsType["margin"]; + shadowDepth: 0 | 1 | 2; + } & React.AnchorHTMLAttributes +>` display: flex; cursor: ${({ hasAction }) => (hasAction ? "pointer" : "unset")}; outline: ${({ hasAction }) => !hasAction && "none"}; diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index 91eb481bb..d61a683c9 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -101,7 +101,7 @@ const Tab = forwardRef( ref: Ref ) => { const { iconPosition, tabIndex, focusedLabel } = useContext(NavTabsContext) ?? {}; - const tabRef = useRef(); + const tabRef = useRef(); const innerRef = useRef(null); useImperativeHandle(ref, () => innerRef.current!, []); @@ -130,13 +130,13 @@ const Tab = forwardRef( aria-disabled={disabled} aria-selected={active} disabled={disabled} - as={href ? "a" : "div"} + as={href ? "a" : onClick ? "button" : "div"} href={!disabled ? href : undefined} onClick={!disabled ? onClick : undefined} iconPosition={iconPosition} onKeyDown={handleOnKeyDown} - ref={(anchorRef) => { - tabRef.current = anchorRef as HTMLAnchorElement | HTMLDivElement; + ref={(anchorRef: HTMLAnchorElement | HTMLDivElement | null) => { + tabRef.current = anchorRef; if (ref) { if (typeof ref === "function") ref(anchorRef); else innerRef.current = anchorRef;