@defra/interactive-map 0.0.22-alpha → 0.0.23-alpha

package/src/App/components/PopupMenu/PopupMenu.test.jsx

@@ -23,7 +23,11 @@ const mockUseApp = {
   hiddenButtons: new Set(),
   disabledButtons: new Set(),
   pressedButtons: new Set(),
-  layoutRefs: { appContainerRef: { current: document.body } }
+  dispatch: jest.fn(),
+  layoutRefs: {
+    appContainerRef: { current: document.body },
+    viewportRef: { current: { focus: jest.fn() } }
+  }
 }
 jest.mock('../../store/appContext', () => ({
   useApp: jest.fn(() => mockUseApp)
@@ -148,6 +152,36 @@ describe('PopupMenu', () => {
     expect(mockSetIsOpen).toHaveBeenCalled()
   })
 
+  it('click on item with panelId dispatches OPEN_PANEL and closes menu', () => {
+    mockUseApp.buttonConfig = { item1: { panelId: 'myPanel' } }
+    renderMenu()
+    fireEvent.click(screen.getByText('Item 1'))
+    expect(mockUseApp.dispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL',
+      payload: { panelId: 'myPanel', props: { triggeringElement: mockUseApp.buttonRefs.current.instigator } }
+    })
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('click on item with panelId and keepFocus includes focusOnOpen: false in dispatch', () => {
+    mockUseApp.buttonConfig = { item1: { panelId: 'myPanel', keepFocus: true } }
+    renderMenu()
+    fireEvent.click(screen.getByText('Item 1'))
+    expect(mockUseApp.dispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL',
+      payload: { panelId: 'myPanel', props: { triggeringElement: mockUseApp.buttonRefs.current.instigator }, focusOnOpen: false }
+    })
+  })
+
+  it('click on item with keepFocus returns focus to instigator instead of viewport', () => {
+    const focusSpy = jest.fn()
+    mockUseApp.buttonRefs.current.instigator.focus = focusSpy
+    mockUseApp.buttonConfig = { item1: { keepFocus: true } }
+    renderMenu()
+    fireEvent.click(screen.getByText('Item 1'))
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
   it('calls buttonConfig.onClick with evaluateProp if defined', () => {
     const mockOnClick = jest.fn()
     mockUseApp.buttonConfig = { item2: { onClick: mockOnClick } }
@@ -186,6 +220,47 @@ describe('PopupMenu', () => {
     expect(mockSetIsOpen).toHaveBeenCalled()
   })
 
+  it('Enter on item with panelId dispatches OPEN_PANEL and closes menu', () => {
+    mockUseApp.buttonConfig = { item1: { panelId: 'myPanel' } }
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(mockUseApp.dispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL',
+      payload: { panelId: 'myPanel', props: { triggeringElement: mockUseApp.buttonRefs.current.instigator } }
+    })
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('Enter on item with panelId and keepFocus includes focusOnOpen: false in dispatch', () => {
+    mockUseApp.buttonConfig = { item1: { panelId: 'myPanel', keepFocus: true } }
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(mockUseApp.dispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL',
+      payload: { panelId: 'myPanel', props: { triggeringElement: mockUseApp.buttonRefs.current.instigator }, focusOnOpen: false }
+    })
+  })
+
+  it('Enter on item with keepFocus returns focus to instigator instead of viewport', () => {
+    const focusSpy = jest.fn()
+    mockUseApp.buttonRefs.current.instigator.focus = focusSpy
+    mockUseApp.buttonConfig = { item1: { keepFocus: true } }
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(focusSpy).toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('Enter on regular item focuses viewport via requestAnimationFrame', () => {
+    const rafSpy = jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 1 })
+    const focusSpy = jest.spyOn(mockUseApp.layoutRefs.viewportRef.current, 'focus')
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(focusSpy).toHaveBeenCalled()
+    rafSpy.mockRestore()
+    focusSpy.mockRestore()
+  })
+
   it('does nothing if click is inside menu', () => {
     renderMenu()
     const element = document.createElement('div')
@@ -387,6 +462,47 @@ describe('PopupMenu', () => {
       expect(items[1].onClick).not.toHaveBeenCalled()
       expect(mockSetIsOpen).not.toHaveBeenCalled()
     })
+
+    it('Space on item with panelId dispatches OPEN_PANEL and closes menu', () => {
+      mockUseApp.buttonConfig = { item1: { panelId: 'myPanel' } }
+      renderMenu({ startIndex: 0 })
+      fireEvent.keyDown(screen.getByRole('menu'), { key: ' ' })
+      expect(mockUseApp.dispatch).toHaveBeenCalledWith({
+        type: 'OPEN_PANEL',
+        payload: { panelId: 'myPanel', props: { triggeringElement: mockUseApp.buttonRefs.current.instigator } }
+      })
+      expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+    })
+
+    it('Space on item with panelId and keepFocus includes focusOnOpen: false in dispatch', () => {
+      mockUseApp.buttonConfig = { item1: { panelId: 'myPanel', keepFocus: true } }
+      renderMenu({ startIndex: 0 })
+      fireEvent.keyDown(screen.getByRole('menu'), { key: ' ' })
+      expect(mockUseApp.dispatch).toHaveBeenCalledWith({
+        type: 'OPEN_PANEL',
+        payload: { panelId: 'myPanel', props: { triggeringElement: mockUseApp.buttonRefs.current.instigator }, focusOnOpen: false }
+      })
+    })
+
+    it('Space on item with keepFocus returns focus to instigator instead of viewport', () => {
+      const focusSpy = jest.fn()
+      mockUseApp.buttonRefs.current.instigator.focus = focusSpy
+      mockUseApp.buttonConfig = { item1: { keepFocus: true } }
+      renderMenu({ startIndex: 0 })
+      fireEvent.keyDown(screen.getByRole('menu'), { key: ' ' })
+      expect(focusSpy).toHaveBeenCalled()
+      expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+    })
+
+    it('Space on regular item focuses viewport via requestAnimationFrame', () => {
+      const rafSpy = jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 1 })
+      const focusSpy = jest.spyOn(mockUseApp.layoutRefs.viewportRef.current, 'focus')
+      renderMenu({ startIndex: 0 })
+      fireEvent.keyDown(screen.getByRole('menu'), { key: ' ' })
+      expect(focusSpy).toHaveBeenCalled()
+      rafSpy.mockRestore()
+      focusSpy.mockRestore()
+    })
   })
 
   describe('buttonRect positioning', () => {

package/src/App/components/PopupMenu/usePopupMenu.js

@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
+import { useApp } from '../../store/appContext.js'
 
 /**
  * Computes the position and alignment style for the popup menu based on the
@@ -44,121 +45,164 @@ const getMenuStyle = (buttonRect) => {
  * The synthetic event is marked _fromKeyboardActivation so handleItemClick can
  * ignore it and avoid double-activation.
  *
- * @param {React.SyntheticEvent} e   - The triggering React event.
- * @param {object}               item - The item being activated.
- * @param {object}               ctx  - Dependencies: { buttonConfig, evaluateProp, pluginId, id }.
+ * @param {React.SyntheticEvent} event - The triggering React event.
+ * @param {object}               item  - The item being activated.
+ * @param {object}               ctx   - Dependencies: { buttonConfig, evaluateProp, pluginId, id }.
  */
-const activateItem = (e, item, { buttonConfig, evaluateProp, pluginId, id }) => {
+const activateItem = (event, item, { buttonConfig, evaluateProp, pluginId, id }) => {
   const menuItemConfig = buttonConfig[item.id]
   if (typeof menuItemConfig?.onClick === 'function') {
-    menuItemConfig.onClick(e, evaluateProp(ctx => ctx, pluginId))
+    menuItemConfig.onClick(event, evaluateProp(ctx => ctx, pluginId))
   } else if (typeof item.onClick === 'function') {
-    item.onClick(e.nativeEvent)
+    item.onClick(event.nativeEvent)
   } else {
     // No action
   }
-  if (e.nativeEvent instanceof KeyboardEvent) {
-    const el = document.getElementById(`${id}-${stringToKebab(item.id)}`)
-    if (el) {
+  if (event.nativeEvent instanceof KeyboardEvent) {
+    const menuItemEl = document.getElementById(`${id}-${stringToKebab(item.id)}`)
+    if (menuItemEl) {
       const click = new MouseEvent('click', { bubbles: true, cancelable: true })
       click._fromKeyboardActivation = true
-      el.dispatchEvent(click)
+      menuItemEl.dispatchEvent(click)
     }
   }
 }
 
+const resolveInitialIndex = (startIndex, startPos, visibleIndices) => {
+  if (typeof startIndex === 'number') {
+    return startIndex
+  }
+  if (startPos === 'first') {
+    return visibleIndices[0] ?? -1
+  }
+  if (startPos === 'last') {
+    return visibleIndices[visibleIndices.length - 1] ?? -1
+  }
+  return -1
+}
+
+const resolveItemFocus = (item, buttonConfig) => ({
+  panelId: buttonConfig[item.id]?.panelId ?? item.panelId,
+  keepFocus: buttonConfig[item.id]?.keepFocus ?? item.keepFocus
+})
+
+const handleMenuEnter = (event, { items, index, disabledButtons, activateCtx, instigator, dispatch, viewportRef, setIsOpen }) => {
+  event.preventDefault()
+  const item = items[index]
+  if (item && !disabledButtons.has(item.id)) {
+    const { panelId, keepFocus } = resolveItemFocus(item, activateCtx.buttonConfig)
+    if (panelId) {
+      dispatch({ type: 'OPEN_PANEL', payload: { panelId, props: { triggeringElement: instigator }, ...(keepFocus && { focusOnOpen: false }) } })
+      setIsOpen(false)
+      return
+    }
+    activateItem(event, item, activateCtx)
+    if (keepFocus) {
+      instigator.focus()
+      setIsOpen(false)
+      return
+    }
+  }
+  requestAnimationFrame(() => viewportRef.current?.focus())
+  setIsOpen(false)
+}
+
+const handleMenuSpace = (event, { items, index, disabledButtons, activateCtx, instigator, dispatch, viewportRef, setIsOpen }) => {
+  event.preventDefault()
+  const item = items[index]
+  if (!item || disabledButtons.has(item.id)) {
+    return
+  }
+  const { panelId, keepFocus } = resolveItemFocus(item, activateCtx.buttonConfig)
+  if (panelId) {
+    dispatch({ type: 'OPEN_PANEL', payload: { panelId, props: { triggeringElement: instigator }, ...(keepFocus && { focusOnOpen: false }) } })
+    setIsOpen(false)
+    return
+  }
+  activateItem(event, item, activateCtx)
+  if (!(item.isPressed !== undefined || item.pressedWhen)) {
+    if (keepFocus) {
+      instigator.focus()
+    } else {
+      requestAnimationFrame(() => viewportRef.current?.focus())
+    }
+    setIsOpen(false)
+  }
+}
+
 /**
  * Builds the keydown handler for the menu UL. Handles Escape/Tab (close & focus),
  * ArrowDown/Up (navigate visible items), Home/End (jump to ends),
  * Enter (activate and close), Space (activate; close only for non-checkbox items).
  *
- * @param {object}   p
- * @param {Array}    p.items           - All menu item descriptors.
- * @param {number[]} p.visibleIndices  - Indices of non-hidden items.
- * @param {number}   p.index           - Currently highlighted index.
- * @param {Function} p.setIndex        - State setter for highlighted index.
- * @param {Set}      p.disabledButtons - IDs of disabled items.
- * @param {object}   p.instigator      - DOM node of the trigger button.
- * @param {Function} p.setIsOpen       - Callback to close the menu.
- * @param {object}   p.activateCtx     - Context passed through to activateItem.
+ * @param {object}   params
+ * @param {Array}    params.items           - All menu item descriptors.
+ * @param {number[]} params.visibleIndices  - Indices of non-hidden items.
+ * @param {number}   params.index           - Currently highlighted index.
+ * @param {Function} params.setIndex        - State setter for highlighted index.
+ * @param {Set}      params.disabledButtons - IDs of disabled items.
+ * @param {object}   params.instigator      - DOM node of the trigger button.
+ * @param {Function} params.setIsOpen       - Callback to close the menu.
+ * @param {object}   params.activateCtx     - Context passed through to activateItem.
+ * @param {Function} params.dispatch        - App dispatch for OPEN_PANEL actions.
+ * @param {object}   params.viewportRef     - Ref to the map viewport element.
  * @returns {Function} onKeyDown handler for the menu element.
  */
-const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx }) => {
-  const closeAndFocus = (e, preventDefault = false) => {
-    if (preventDefault && e?.preventDefault) {
-      e.preventDefault()
+const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx, dispatch, viewportRef }) => {
+  const closeAndFocus = (event, preventDefault = false) => {
+    if (preventDefault && event?.preventDefault) {
+      event.preventDefault()
     }
     instigator.focus()
     setIsOpen(false)
   }
 
-  const navigateVisible = (e) => {
-    e.preventDefault()
-    const n = visibleIndices.length
-    if (n === 0) {
+  const navigateVisible = (event) => {
+    event.preventDefault()
+    const visibleCount = visibleIndices.length
+    if (visibleCount === 0) {
       return
     }
     const pos = visibleIndices.indexOf(index)
     let nextPos
-    if (e.key === 'ArrowDown') {
-      nextPos = pos === -1 ? 0 : (pos + 1) % n
+    if (event.key === 'ArrowDown') {
+      nextPos = pos === -1 ? 0 : (pos + 1) % visibleCount
     } else if (pos === -1) {
-      nextPos = n - 1
+      nextPos = visibleCount - 1
     } else {
-      nextPos = (pos - 1 + n) % n
+      nextPos = (pos - 1 + visibleCount) % visibleCount
     }
     setIndex(visibleIndices[nextPos])
   }
 
-  const handleEnter = (e) => {
-    e.preventDefault()
-    const item = items[index]
-    if (item && !disabledButtons.has(item.id)) {
-      activateItem(e, item, activateCtx)
-    }
-    instigator.focus()
-    setIsOpen(false)
-  }
-
-  const handleSpace = (e) => {
-    e.preventDefault()
-    const item = items[index]
-    if (!item || disabledButtons.has(item.id)) {
-      return
-    }
-    activateItem(e, item, activateCtx)
-    if (!(item.isPressed !== undefined || item.pressedWhen)) {
-      instigator.focus()
-      setIsOpen(false)
-    }
-  }
+  const actionCtx = { items, index, disabledButtons, activateCtx, instigator, dispatch, viewportRef, setIsOpen }
 
-  return (e) => {
-    if (['Escape', 'Esc'].includes(e.key)) {
-      closeAndFocus(e, true)
+  return (event) => {
+    if (['Escape', 'Esc'].includes(event.key)) {
+      closeAndFocus(event, true)
       return
     }
-    if (e.key === 'Tab') {
-      closeAndFocus(e)
+    if (event.key === 'Tab') {
+      closeAndFocus(event)
       return
     }
-    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
-      navigateVisible(e)
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+      navigateVisible(event)
       return
     }
-    if (e.key === 'Home' && visibleIndices.length) {
+    if (event.key === 'Home' && visibleIndices.length) {
       setIndex(visibleIndices[0])
       return
     }
-    if (e.key === 'End' && visibleIndices.length) {
+    if (event.key === 'End' && visibleIndices.length) {
       setIndex(visibleIndices[visibleIndices.length - 1])
       return
     }
-    if (e.key === 'Enter') {
-      handleEnter(e)
+    if (event.key === 'Enter') {
+      handleMenuEnter(event, actionCtx)
     }
-    if (e.key === ' ') {
-      handleSpace(e)
+    if (event.key === ' ') {
+      handleMenuSpace(event, actionCtx)
     }
   }
 }
@@ -174,7 +218,7 @@ const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disa
  * @param {object}   params.instigator       - DOM node of the button that opened the menu.
  * @param {string}   params.instigatorKey    - Key used to look up instigator in buttonRefs.
  * @param {object}   params.buttonRefs       - Ref map of all registered button DOM nodes.
- * @param {object}   params.buttonConfig     - Config map that may override item onClick handlers.
+ * @param {object}   params.buttonConfig     - Config map that may override item onClick, panelId, and keepFocus.
  * @param {Set}      params.disabledButtons  - IDs of currently disabled items.
  * @param {string}   params.pluginId         - Plugin context passed to evaluateProp.
  * @param {Function} params.evaluateProp     - Context evaluator from useEvaluateProp.
@@ -189,6 +233,9 @@ export const usePopupMenu = ({
   items, hiddenButtons, startIndex, startPos, instigator, instigatorKey,
   buttonRefs, buttonConfig, disabledButtons, pluginId, evaluateProp, id, menuRef, setIsOpen, buttonRect
 }) => {
+  const { dispatch, layoutRefs } = useApp()
+  const viewportRef = layoutRefs.viewportRef
+
   const visibleIndices = useMemo(() => {
     const visible = []
     items.forEach((item, idx) => {
@@ -199,38 +246,38 @@ export const usePopupMenu = ({
     return visible
   }, [items, hiddenButtons])
 
-  const [index, setIndex] = useState(() => {
-    if (typeof startIndex === 'number') {
-      return startIndex
-    }
-    if (startPos === 'first') {
-      return visibleIndices[0] ?? -1
-    }
-    if (startPos === 'last') {
-      return visibleIndices[visibleIndices.length - 1] ?? -1
-    }
-    return -1
-  })
+  const [index, setIndex] = useState(() => resolveInitialIndex(startIndex, startPos, visibleIndices))
 
   const activateCtx = { buttonConfig, evaluateProp, pluginId, id }
 
   const handleMenuKeyDown = createMenuKeyDownHandler({
-    items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx
+    items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx, dispatch, viewportRef
   })
 
-  const handleOutside = (e) => {
-    if (menuRef.current?.contains(e.target) || buttonRefs.current[instigatorKey]?.contains(e.target)) {
+  const handleOutside = (event) => {
+    if (menuRef.current?.contains(event.target) || buttonRefs.current[instigatorKey]?.contains(event.target)) {
       return
     }
     setIsOpen(false)
   }
 
-  const handleItemClick = (e, item) => {
-    if (e.nativeEvent._fromKeyboardActivation || disabledButtons.has(item.id)) {
+  const handleItemClick = (event, item) => {
+    if (event.nativeEvent._fromKeyboardActivation || disabledButtons.has(item.id)) {
+      return
+    }
+    const { panelId, keepFocus } = resolveItemFocus(item, buttonConfig)
+    if (panelId) {
+      dispatch({ type: 'OPEN_PANEL', payload: { panelId, props: { triggeringElement: instigator }, ...(keepFocus && { focusOnOpen: false }) } })
+      setIsOpen(false)
       return
     }
     setIsOpen(false)
-    activateItem(e, item, activateCtx)
+    activateItem(event, item, activateCtx)
+    if (keepFocus) {
+      instigator.focus()
+    } else {
+      viewportRef.current?.focus()
+    }
   }
 
   useEffect(() => {

package/src/App/components/Tabs/Tabs.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useCallback } from 'react'
+
+const toTabId = (name) => `im-c-tabs-tab-${name.toLowerCase().replaceAll(/\s+/g, '-')}`
+const toPanelId = (name) => `im-c-tabs-panel-${name.toLowerCase().replaceAll(/\s+/g, '-')}`
+
+// eslint-disable-next-line camelcase, react/jsx-pascal-case
+// sonarjs/disable-next-line function-name
+export const Tabs = ({ tabs, defaultTab }) => { // NOSONAR: project does not use PropTypes
+  const names = tabs.map(t => t.name)
+  const [activeTab, setActiveTab] = useState(defaultTab ?? names[0])
+
+  const activateTab = useCallback((name) => {
+    setActiveTab(name)
+    document.getElementById(toTabId(name))?.focus()
+  }, [])
+
+  const handleKeyDown = useCallback((e) => {
+    const idx = names.indexOf(activeTab)
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      activateTab(names[(idx + 1) % names.length])
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      activateTab(names[(idx - 1 + names.length) % names.length])
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      activateTab(names[0])
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      activateTab(names.at(-1))
+    } else {
+      // no action
+    }
+  }, [names, activeTab, activateTab])
+
+  const activeContent = tabs.find(t => t.name === activeTab)?.content
+
+  return (
+    <div className='im-c-tabs'>
+      <div role='tablist' className='im-c-tabs__list'>
+        {tabs.map(({ name }) => (
+          <button
+            key={name}
+            id={toTabId(name)}
+            role='tab'
+            aria-selected={activeTab === name}
+            aria-controls={toPanelId(name)}
+            tabIndex={activeTab === name ? 0 : -1}
+            className='im-c-tabs__tab'
+            onClick={() => activateTab(name)}
+            onKeyDown={handleKeyDown}
+          >
+            <span className='im-c-tabs__label'>{name}</span>
+          </button>
+        ))}
+      </div>
+      <div
+        id={toPanelId(activeTab)}
+        role='tabpanel'
+        aria-labelledby={toTabId(activeTab)}
+        tabIndex={-1} // nosonar — panel has no focusable children; -1 per ARIA tabs pattern (AT reads via role/aria-labelledby)
+        className='im-c-tabs__panel'
+      >
+        {activeContent}
+      </div>
+    </div>
+  )
+}

package/src/App/components/Tabs/Tabs.module.scss

@@ -0,0 +1,57 @@
+@use '../../../scss/tools/index' as tools;
+
+// ===================================================
+// Component: Tabs
+// ===================================================
+
+.im-c-tabs__list {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px solid var(--app-border-color);
+    z-index: 1;
+}
+
+.im-c-tabs__tab {
+    position: relative;
+    appearance: none;
+    background: var(--button-hover-color);
+    border: 1px solid transparent;
+    border-bottom: none;
+    padding: 7.5px 15px;
+    margin: 5px 5px 5px 0;
+    cursor: pointer;
+    color: var(--foreground-color);
+    font-size: inherit;
+    font-weight: normal;
+    outline: 3px solid transparent;
+
+    &[aria-selected='true'] {
+        background: var(--background-color);
+        border-color: var(--app-border-color);
+        border-bottom-color: var(--background-color);
+        margin-top: 0;
+        margin-bottom: -1px;
+    }
+
+    &:focus .im-c-tabs__label {
+        @include tools.link-focus;
+    }
+}
+
+.im-c-tabs__tab:not([aria-selected='true']) {
+    &:hover {
+        background-color: var(--content-border-color);
+    }
+
+    .im-c-tabs__label {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+
+    &:hover .im-c-tabs__label {
+        text-decoration-thickness: 3px;
+    }
+}