fix(Tabs): active tab has wrong hover style (#2061)

digdir · May 23, 2024 · 104e16d · 104e16d
1 parent 10fb504
commit 104e16d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/packages/css/tabs.css b/packages/css/tabs.css
@@ -62,14 +62,14 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .fds-tabs__tab:hover {
+    .fds-tabs__tab:hover:not([aria-selected='true']) {
       --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-neutral-subtle);
 
       color: var(--fds-semantic-text-neutral-default);
     }
   }
 
-  .fds-tabs__tab--active {
+  .fds-tabs__tab[aria-selected='true'] {
     --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-action-default);
 
     color: var(--fds-semantic-text-action-default);

diff --git a/packages/react/src/components/Tabs/Tab/Tab.tsx b/packages/react/src/components/Tabs/Tab/Tab.tsx
@@ -13,7 +13,7 @@ export type TabProps = {
 
 export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
   const { children, className, ...rest } = props;
-  const { active, ...useTabRest } = useTabItem(props);
+  const { ...useTabRest } = useTabItem(props);
 
   return (
     <RovingTabindexItem
@@ -22,11 +22,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
     >
       <button
         {...useTabRest}
-        className={cl(
-          'fds-tabs__tab',
-          active && 'fds-tabs__tab--active',
-          className,
-        )}
+        className={cl('fds-tabs__tab', className)}
         ref={ref}
       >
         {children}

diff --git a/packages/react/src/components/Tabs/Tab/useTab.ts b/packages/react/src/components/Tabs/Tab/useTab.ts
@@ -5,9 +5,9 @@ import { TabsContext } from '../Tabs';
 
 import type { TabProps } from './Tab';
 
-type UseTab = (props: TabProps) => {
-  active: boolean;
-} & Pick<
+type UseTab = (
+  props: TabProps,
+) => Pick<
   HTMLAttributes<HTMLButtonElement>,
   'id' | 'aria-selected' | 'role' | 'onClick'
 >;
@@ -16,14 +16,12 @@ type UseTab = (props: TabProps) => {
 export const useTabItem: UseTab = (props: TabProps) => {
   const { value, ...rest } = props;
   const tabs = useContext(TabsContext);
-  const active = tabs.value == value;
   const buttonId = `tab-${useId()}`;
 
   return {
     ...rest,
-    active: active,
     id: buttonId,
-    'aria-selected': active,
+    'aria-selected': tabs.value == value,
     role: 'tab',
     onClick: () => {
       tabs.onChange?.(value);