@oslokommune/punkt-react 16.8.1 → 16.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.8.1",
+  "version": "16.8.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.7.7",
+    "@oslokommune/punkt-elements": "^16.8.2",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.7.6",
+    "@oslokommune/punkt-css": "^16.8.2",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "01d75359139a8932b991c37ecaea46458e2b2d66"
+  "gitHead": "1ff7d19b9d19c3b3e810dcee4bc3bd1d3fcc3610"
 }

package/src/components/tabs/TabItem.tsx

@@ -11,6 +11,7 @@ export type TSkin = IPktTag['skin']
 export interface IPktTabItem {
   children: ReactNode
   active?: boolean
+  disabled?: boolean
   href?: string
   onClick?: (event: MouseEvent) => void
   icon?: string
@@ -21,23 +22,39 @@ export interface IPktTabItem {
 }
 
 export const PktTabItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IPktTabItem>(
-  ({ children, active, href, onClick, icon, controls, tag, tagSkin, index = 0 }, ref) => {
+  ({ children, active, disabled = false, href, onClick, icon, controls, tag, tagSkin, index = 0 }, ref) => {
     const { arrowNav, registerTabRef, handleKeyPress, selectTab } = useTabsContext()
+    const isActive = !!active && !disabled
 
     const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+      if (disabled) {
+        event.preventDefault()
+        event.stopPropagation()
+        return
+      }
       selectTab(index)
       onClick?.(event)
     }
 
+    const handleKeyDown = (event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+      if (disabled && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {
+        event.preventDefault()
+        event.stopPropagation()
+        return
+      }
+
+      handleKeyPress(index, event)
+    }
+
     const commonProps = {
-      'aria-selected': arrowNav ? !!active : undefined,
+      'aria-selected': arrowNav ? isActive : undefined,
       'aria-controls': controls,
       role: arrowNav ? 'tab' : undefined,
-      onKeyUp: (event: KeyboardEvent) => handleKeyPress(index, event),
+      onKeyDown: handleKeyDown,
       onClick: handleClick,
-      tabIndex: active || !arrowNav ? undefined : -1,
+      tabIndex: disabled ? -1 : isActive || !arrowNav ? undefined : -1,
       ref: (el: HTMLAnchorElement | HTMLButtonElement | null) => {
-        registerTabRef(index, el)
+        registerTabRef(index, el, disabled)
         if (typeof ref === 'function') {
           ref(el)
         } else if (ref) {
@@ -60,14 +77,25 @@ export const PktTabItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IPkt
 
     if (href) {
       return (
-        <a {...commonProps} href={href} className={`pkt-tabs__link ${active ? 'active' : ''}`}>
+        <a
+          {...commonProps}
+          href={disabled ? undefined : href}
+          aria-disabled={disabled || undefined}
+          className={`pkt-tabs__link ${isActive ? 'active' : ''} ${disabled ? 'pkt-tabs__item--disabled' : ''}`}
+        >
           {content}
         </a>
       )
     }
 
     return (
-      <button {...commonProps} type="button" className={`pkt-tabs__button pkt-link-button ${active ? 'active' : ''}`}>
+      <button
+        {...commonProps}
+        type="button"
+        disabled={disabled}
+        aria-disabled={disabled || undefined}
+        className={`pkt-tabs__button pkt-link-button ${isActive ? 'active' : ''} ${disabled ? 'pkt-tabs__item--disabled' : ''}`}
+      >
         {content}
       </button>
     )

package/src/components/tabs/Tabs.test.tsx

@@ -205,7 +205,7 @@ describe('PktTabItem children format', () => {
     const secondTab = getByText('Second Tab')
 
     firstTab.focus()
-    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+    fireEvent.keyDown(firstTab, { key: 'ArrowRight' })
 
     expect(secondTab).toHaveFocus()
   })
@@ -225,7 +225,7 @@ describe('PktTabItem children format', () => {
     const secondTab = getByText('Second Tab')
 
     secondTab.focus()
-    fireEvent.keyUp(secondTab, { code: 'ArrowLeft' })
+    fireEvent.keyDown(secondTab, { key: 'ArrowLeft' })
 
     expect(firstTab).toHaveFocus()
   })
@@ -244,7 +244,7 @@ describe('PktTabItem children format', () => {
     const thirdTab = getByText('Third Tab')
 
     thirdTab.focus()
-    fireEvent.keyUp(thirdTab, { code: 'ArrowRight' })
+    fireEvent.keyDown(thirdTab, { key: 'ArrowRight' })
 
     expect(thirdTab).toHaveFocus()
   })
@@ -263,7 +263,7 @@ describe('PktTabItem children format', () => {
     const firstTab = getByText('First Tab')
 
     firstTab.focus()
-    fireEvent.keyUp(firstTab, { code: 'ArrowLeft' })
+    fireEvent.keyDown(firstTab, { key: 'ArrowLeft' })
 
     expect(firstTab).toHaveFocus()
   })
@@ -278,7 +278,7 @@ describe('PktTabItem children format', () => {
     )
 
     const secondTab = getByText('Second Tab')
-    fireEvent.keyUp(secondTab, { code: 'Space' })
+    fireEvent.keyDown(secondTab, { key: ' ' })
 
     expect(handleTabSelected).toHaveBeenCalledWith(1)
   })
@@ -293,7 +293,7 @@ describe('PktTabItem children format', () => {
     )
 
     const secondTab = getByText('Second Tab')
-    fireEvent.keyUp(secondTab, { code: 'ArrowDown' })
+    fireEvent.keyDown(secondTab, { key: 'ArrowDown' })
 
     expect(handleTabSelected).toHaveBeenCalledWith(1)
   })
@@ -312,7 +312,7 @@ describe('PktTabItem children format', () => {
     const secondTab = getByText('Second Tab')
 
     firstTab.focus()
-    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+    fireEvent.keyDown(firstTab, { key: 'ArrowRight' })
 
     expect(secondTab).not.toHaveFocus()
   })
@@ -331,7 +331,7 @@ describe('PktTabItem children format', () => {
     const secondTab = getByText('Second Tab')
 
     firstTab.focus()
-    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+    fireEvent.keyDown(firstTab, { key: 'ArrowRight' })
 
     expect(secondTab).not.toHaveFocus()
   })
@@ -351,7 +351,7 @@ describe('PktTabItem children format', () => {
 
     // Even though arrowNav is true, disableArrowNav should override it
     firstTab.focus()
-    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+    fireEvent.keyDown(firstTab, { key: 'ArrowRight' })
 
     expect(secondTab).not.toHaveFocus()
   })
@@ -377,6 +377,104 @@ describe('PktTabItem children format', () => {
     expect(handleTabSelected).toHaveBeenCalledWith(2)
   })
 
+  describe('Disabled tabs', () => {
+    it('does not call onTabSelected or action for disabled button tab from tabs prop', () => {
+      const onTabSelected = vi.fn()
+      const action = vi.fn()
+      const { getByText } = render(
+        <PktTabs
+          onTabSelected={onTabSelected}
+          tabs={[
+            { text: 'Enabled', action: vi.fn() },
+            { text: 'Disabled', action, disabled: true },
+          ]}
+        />,
+      )
+
+      fireEvent.click(getByText('Disabled'))
+
+      expect(action).not.toHaveBeenCalled()
+      expect(onTabSelected).not.toHaveBeenCalled()
+    })
+
+    it('renders disabled button tab as native disabled', () => {
+      const { getByText } = render(
+        <PktTabs>
+          <PktTabItem index={0} disabled>
+            Disabled button
+          </PktTabItem>
+        </PktTabs>,
+      )
+
+      expect(getByText('Disabled button')).toBeDisabled()
+    })
+
+    it('renders disabled link tab with aria-disabled and blocks interaction', () => {
+      const handleTabSelected = vi.fn()
+      const handleClick = vi.fn()
+      const { getByText } = render(
+        <PktTabs onTabSelected={handleTabSelected}>
+          <PktTabItem index={0} href="/enabled">
+            Enabled link
+          </PktTabItem>
+          <PktTabItem index={1} href="/disabled" disabled onClick={handleClick}>
+            Disabled link
+          </PktTabItem>
+        </PktTabs>,
+      )
+
+      const disabledLink = getByText('Disabled link')
+      fireEvent.click(disabledLink)
+      fireEvent.keyDown(disabledLink, { key: 'Enter' })
+
+      expect(disabledLink).toHaveAttribute('aria-disabled', 'true')
+      expect(disabledLink).toHaveAttribute('tabindex', '-1')
+      expect(disabledLink).not.toHaveAttribute('href')
+      expect(handleClick).not.toHaveBeenCalled()
+      expect(handleTabSelected).not.toHaveBeenCalled()
+    })
+
+    it('skips disabled tabs during arrow navigation', () => {
+      const { getByText } = render(
+        <PktTabs>
+          <PktTabItem index={0} active>
+            First
+          </PktTabItem>
+          <PktTabItem index={1} disabled>
+            Disabled
+          </PktTabItem>
+          <PktTabItem index={2}>Third</PktTabItem>
+        </PktTabs>,
+      )
+
+      const first = getByText('First')
+      const third = getByText('Third')
+
+      first.focus()
+      fireEvent.keyDown(first, { key: 'ArrowRight' })
+
+      expect(third).toHaveFocus()
+    })
+
+    it('prevents disabled active tab from being selectable', () => {
+      const handleTabSelected = vi.fn()
+      const { getByText } = render(
+        <PktTabs onTabSelected={handleTabSelected}>
+          <PktTabItem index={0} active disabled>
+            Disabled active
+          </PktTabItem>
+          <PktTabItem index={1}>Enabled</PktTabItem>
+        </PktTabs>,
+      )
+
+      const disabledTab = getByText('Disabled active')
+      expect(disabledTab).toHaveAttribute('aria-selected', 'false')
+
+      fireEvent.keyDown(disabledTab, { key: 'Enter' })
+      expect(handleTabSelected).not.toHaveBeenCalled()
+    })
+  })
+
   describe('Accessibility', () => {
     it('should not have any accessibility violations', async () => {
       const { container } = render(

package/src/components/tabs/Tabs.tsx

@@ -19,8 +19,12 @@ export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gr
 // Context for passing tab navigation logic to children
 interface ITabsContext {
   arrowNav: boolean
-  registerTabRef: (index: number, el: HTMLAnchorElement | HTMLButtonElement | null) => void
-  handleKeyPress: (index: number, event: KeyboardEvent) => void
+  registerTabRef: (
+    index: number,
+    el: HTMLAnchorElement | HTMLButtonElement | null,
+    disabled?: boolean,
+  ) => void
+  handleKeyPress: (index: number, event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) => void
   selectTab: (index: number) => void
 }
 
@@ -38,6 +42,7 @@ export interface IPktTab {
   text: string
   href?: string
   action?: (index: number) => void
+  disabled?: boolean
   icon?: string
   controls?: string
   tag?: {
@@ -61,6 +66,7 @@ export const PktTabs = forwardRef(
     ref: Ref<HTMLDivElement>,
   ): JSX.Element => {
     const tabRefs = useRef<Array<HTMLAnchorElement | HTMLButtonElement | null>>([])
+    const disabledMap = useRef<Record<number, boolean>>({})
 
     const useArrowNav = arrowNav && !disableArrowNav
 
@@ -70,9 +76,19 @@ export const PktTabs = forwardRef(
 
     useEffect(() => {
       tabRefs.current = tabRefs.current.slice(0, tabCount)
+      Object.keys(disabledMap.current).forEach((key) => {
+        const index = Number(key)
+        if (index >= tabCount) delete disabledMap.current[index]
+      })
     }, [tabCount])
 
+    const isTabDisabled = (index: number): boolean => {
+      if (tabs) return !!tabs[index]?.disabled
+      return !!disabledMap.current[index]
+    }
+
     const selectTab = (index: number): void => {
+      if (isTabDisabled(index)) return
       const tab = tabs?.[index]
       if (tab?.action) {
         tab.action(index)
@@ -80,31 +96,56 @@ export const PktTabs = forwardRef(
       if (onTabSelected) onTabSelected(index)
     }
 
-    const handleKeyPress = (index: number, event: KeyboardEvent) => {
-      if (useArrowNav) {
-        if (event.code === 'ArrowLeft' && index !== 0) {
-          tabRefs.current[index - 1]?.focus()
-        }
-        if (event.code === 'ArrowRight' && index < tabCount - 1) {
-          tabRefs.current[index + 1]?.focus()
-        }
-        if (event.code === 'ArrowDown' || event.code === 'Space') {
+    const findEnabledIndex = (startIndex: number, direction: -1 | 1): number | null => {
+      let current = startIndex + direction
+
+      while (current >= 0 && current < tabCount) {
+        if (!isTabDisabled(current)) return current
+        current += direction
+      }
+
+      return null
+    }
+
+    const handleKeyPress = (index: number, event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+      if (!useArrowNav) return
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        const previousEnabled = findEnabledIndex(index, -1)
+        if (previousEnabled !== null) tabRefs.current[previousEnabled]?.focus()
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        const nextEnabled = findEnabledIndex(index, 1)
+        if (nextEnabled !== null) tabRefs.current[nextEnabled]?.focus()
+      }
+
+      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        if (!isTabDisabled(index)) {
           selectTab(index)
         }
       }
     }
 
-    const registerTabRef = (index: number, el: HTMLAnchorElement | HTMLButtonElement | null) => {
+    const registerTabRef = (
+      index: number,
+      el: HTMLAnchorElement | HTMLButtonElement | null,
+      disabled = false,
+    ) => {
       tabRefs.current[index] = el
+      disabledMap.current[index] = disabled
     }
 
     // If tabs as prop instead of children
     const tabItems = tabs?.map((tab, index) => (
       <PktTabItem
         key={index}
-        active={tab.active}
+        active={tab.disabled ? false : tab.active}
+        disabled={tab.disabled}
         href={tab.href}
-        onClick={() => selectTab(index)}
         icon={tab.icon}
         controls={tab.controls}
         tag={tab.tag?.text}