@defra/interactive-map 0.0.3-alpha → 0.0.5-alpha

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

@@ -26,23 +26,25 @@
         $type: button
     );
 
-    & {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-        padding-left: var(--button-padding);
-        padding-right: var(--button-padding);
+    padding-left: var(--button-padding);
+    padding-right: var(--button-padding);
 
-        pointer-events: auto;
-        color: var(--foreground-color);
-        background-color: var(--button-background-color);
+    pointer-events: auto;
+    color: var(--foreground-color);
+    background-color: var(--button-background-color);
 
-        min-height: var(--button-size);
-        min-width: var(--button-size);
+    min-height: var(--button-size);
+    min-width: var(--button-size);
 
-        user-select: none;
-        cursor: pointer;
+    user-select: none;
+    cursor: pointer;
+
+    &--primary[aria-disabled="true"], &--tertiary[aria-disabled="true"] {
+        opacity: var(--disabled-button-opacity);
     }
 }
 
@@ -66,9 +68,7 @@
             transition: background-color var(--duration) ease;
         }
 
-        & {
-            background-color: var(--button-hover-color);
-        }
+        background-color: var(--button-hover-color);
     }
 }
 
@@ -134,6 +134,14 @@
         @include tools.border-focus-corner-override($corners: 'top');
     }
 
+    .im-c-button-wrapper--group-middle .im-c-map-button {
+        @include tools.border-focus-corner-override($corners: 'none');
+
+        &::before {
+            clip-path: inset(0 -20px 0 -20px);
+        }
+    }
+
     .im-c-button-wrapper--group-end .im-c-map-button {
         margin-top: 0;
         @include tools.border-focus-corner-override($corners: 'bottom');
@@ -150,6 +158,14 @@
         @include tools.border-focus-corner-override($corners: 'left');
     }
 
+    .im-c-button-wrapper--group-middle .im-c-map-button {
+        @include tools.border-focus-corner-override($corners: 'none');
+
+        &::before {
+            clip-path: inset(-20px 0 -20px 0);
+        }
+    }
+
     .im-c-button-wrapper--group-end .im-c-map-button {
         @include tools.border-focus-corner-override($corners: 'right');
     }
@@ -162,11 +178,6 @@
     }
 }
 
-.im-c-map-button {
-    &--primary[aria-disabled="true"], &--tertiary[aria-disabled="true"] {
-        opacity: var(--disabled-button-opacity);
-    }
-}
 
 .im-o-app__actions .im-c-map-button[aria-pressed="true"] {
     color: var(--pressed-button-foreground-color);

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

@@ -3,55 +3,57 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { MapButton } from './MapButton'
 
 jest.mock('../../../utils/stringToKebab', () => ({
-  stringToKebab: (str) => str ? str.replace(/\s+/g, '-').toLowerCase() : ''
+  stringToKebab: (str) => (str ? str.replace(/\s+/g, '-').toLowerCase() : '')
 }))
 
 jest.mock('../Tooltip/Tooltip', () => ({
-  Tooltip: ({ content, children }) => <div data-testid='tooltip' data-content={content}>{children}</div>
+  Tooltip: ({ content, children }) => (
+    <div data-testid='tooltip' data-content={content}>{children}</div>
+  )
 }))
 
 jest.mock('../Icon/Icon', () => ({
-  Icon: ({ id, svgContent }) => <svg data-testid={id || 'custom-icon'} data-svg={svgContent} aria-hidden='true' />
+  Icon: ({ id, svgContent }) => (
+    <svg data-testid={id || 'custom-icon'} data-svg={svgContent} aria-hidden='true' />
+  )
 }))
 
 jest.mock('../../renderer/SlotRenderer', () => ({
   SlotRenderer: ({ slot }) => <div data-testid='slot' data-slot={slot} />
 }))
 
-jest.mock('../../store/configContext', () => ({
-  useConfig: () => ({ id: 'app' })
+jest.mock('../PopupMenu/PopupMenu', () => ({
+  PopupMenu: ({ startPos, items }) => {
+    let selectedIndex = -1
+    if (startPos === 'first' && items?.length > 0) {
+      selectedIndex = 0
+    }
+    if (startPos === 'last' && items?.length > 0) {
+      selectedIndex = items.length - 1
+    }
+    return <div data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)}>{items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}</div>
+  }
 }))
 
+jest.mock('../../store/configContext', () => ({ useConfig: () => ({ id: 'app' }) }))
+
 const mockButtonRefs = { current: {} }
-jest.mock('../../store/appContext', () => ({
-  useApp: () => ({ buttonRefs: mockButtonRefs })
-}))
+jest.mock('../../store/appContext', () => ({ useApp: () => ({ buttonRefs: mockButtonRefs }) }))
 
 describe('MapButton', () => {
-  beforeEach(() => {
-    mockButtonRefs.current = {}
-  })
-
-  const renderButton = (props = {}) =>
-    render(<MapButton buttonId='Test' iconId='icon' label='Label' {...props} />)
+  beforeEach(() => { mockButtonRefs.current = {} })
 
-  it('renders button with classes, icon, and label', () => {
-    renderButton({ buttonId: 'My Button', variant: 'primary', showLabel: true })
-    const button = screen.getByRole('button', { name: 'Label' })
-    expect(button).toHaveClass('im-c-map-button', 'im-c-map-button--my-button', 'im-c-map-button--primary', 'im-c-map-button--with-label')
-    expect(screen.getByTestId('icon')).toBeInTheDocument()
-    expect(screen.getByText('Label')).toBeInTheDocument()
-  })
-
-  it('renders Icon with svgContent when provided', () => {
-    renderButton({ iconId: null, iconSvgContent: '<circle />' })
-    expect(screen.getByTestId('custom-icon')).toHaveAttribute('data-svg', '<circle />')
-  })
+  const renderButton = (props = {}) => render(<MapButton buttonId='Test' iconId='icon' label='Label' {...props} />)
+  const getButton = () => screen.getByRole('button')
 
-  it('does not render Icon when neither iconId nor iconSvgContent provided', () => {
-    renderButton({ iconId: null, iconSvgContent: null })
-    expect(screen.queryByTestId('icon')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('custom-icon')).not.toBeInTheDocument()
+  it.each([
+    [{ buttonId: 'My Button', variant: 'primary', showLabel: true }, ['im-c-map-button', 'im-c-map-button--my-button', 'im-c-map-button--primary', 'im-c-map-button--with-label']],
+    [{ iconId: null, iconSvgContent: '<circle />' }, []]
+  ])('renders button variations and classes', (props, expectedClasses) => {
+    renderButton(props)
+    const button = getButton()
+    expectedClasses.forEach(cls => expect(button).toHaveClass(cls))
+    if (props.iconSvgContent) expect(screen.getByTestId('custom-icon')).toHaveAttribute('data-svg', props.iconSvgContent)
   })
 
   it('wraps in Tooltip when showLabel is false', () => {
@@ -59,7 +61,7 @@ describe('MapButton', () => {
     expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'Label')
   })
 
-  it('hides wrapper when isHidden is true', () => {
+  it('hides wrapper when isHidden', () => {
     const { container } = renderButton({ isHidden: true })
     expect(container.firstChild).toHaveStyle('display: none')
   })
@@ -68,89 +70,131 @@ describe('MapButton', () => {
     ['groupStart', 'im-c-button-wrapper--group-start'],
     ['groupMiddle', 'im-c-button-wrapper--group-middle'],
     ['groupEnd', 'im-c-button-wrapper--group-end']
-  ])('applies %s class', (prop, className) => {
+  ])('applies wrapper %s class', (prop, className) => {
     const { container } = renderButton({ [prop]: true })
     expect(container.firstChild).toHaveClass(className)
   })
 
-  it('applies all aria attributes with panelId', () => {
-    renderButton({ panelId: 'Settings', idPrefix: 'prefix', isDisabled: true, isExpanded: true, isOpen: false })
-    const button = screen.getByRole('button')
+  it('handles panelId aria attributes', () => {
+    renderButton({ panelId: 'Settings', idPrefix: 'prefix', isDisabled: true, isPanelOpen: false })
+    const button = getButton()
     expect(button).toHaveAttribute('aria-disabled', 'true')
-    expect(button).toHaveAttribute('aria-expanded', 'true')
-    expect(button).toHaveAttribute('aria-pressed', 'false')
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+    expect(button).not.toHaveAttribute('aria-pressed')
     expect(button).toHaveAttribute('aria-controls', 'prefix-panel-settings')
     expect(screen.getByTestId('slot')).toHaveAttribute('data-slot', 'test-button')
   })
 
-  it('sets aria-pressed true when isOpen is true', () => {
-    renderButton({ panelId: 'Menu', idPrefix: 'prefix', isOpen: true })
-    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true')
+  it.each([
+    [{ isPressed: true }, 'true'],
+    [{ isPressed: 'true' }, undefined]
+  ])('sets aria-pressed correctly', (props, expected) => {
+    renderButton(props)
+    const button = getButton()
+    if (expected) expect(button).toHaveAttribute('aria-pressed', expected)
+    else expect(button).not.toHaveAttribute('aria-pressed')
   })
 
-  it('uses isPressed when no panelId', () => {
-    renderButton({ isPressed: 'true' })
-    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true')
+  it('sets aria-expanded when no panelId and isExpanded', () => {
+    renderButton({ isExpanded: true })
+    expect(getButton()).toHaveAttribute('aria-expanded', 'true')
   })
 
-  it('omits aria-expanded when undefined', () => {
-    renderButton({ isExpanded: undefined })
-    expect(screen.getByRole('button')).not.toHaveAttribute('aria-expanded')
+  it('handles click events', () => {
+    const onClick = jest.fn()
+    renderButton({ onClick })
+    fireEvent.click(getButton())
+    expect(onClick).toHaveBeenCalled()
   })
 
-  it('fires onClick handler', () => {
-    const handleClick = jest.fn()
-    renderButton({ onClick: handleClick })
-    fireEvent.click(screen.getByRole('button'))
-    expect(handleClick).toHaveBeenCalled()
+  it('does not fire onClick or open popup when disabled', () => {
+    const onClick = jest.fn()
+    renderButton({ isDisabled: true, menuItems: [{ label: 'Item' }], onClick })
+    fireEvent.click(getButton())
+    expect(onClick).not.toHaveBeenCalled()
+    expect(screen.queryByTestId('popup-menu')).not.toBeInTheDocument()
   })
 
-  it('stores button ref when buttonId provided', () => {
+  it('stores button refs correctly', () => {
     renderButton({ buttonId: 'TestButton' })
-    expect(mockButtonRefs.current.TestButton).toBe(screen.getByRole('button'))
+    expect(mockButtonRefs.current.TestButton).toBe(getButton())
   })
 
-  it('does not store ref when buttonRefs.current is falsy', () => {
-    mockButtonRefs.current = null
-    renderButton({ buttonId: 'Test' })
-    // Should not throw
+  it('does not store ref if buttonId falsy', () => {
+    render(<MapButton buttonId={null} iconId='icon' label='Label' />)
+    expect(mockButtonRefs.current).toEqual({})
   })
 
-  it('renders as anchor with href', () => {
-    renderButton({ href: 'https://example.com' })
-    const link = screen.getByRole('button')
-    expect(link.tagName).toBe('A')
-    expect(link).toHaveAttribute('href', 'https://example.com')
-    expect(link).toHaveAttribute('target', '_blank')
+  it('handles popup aria attributes', () => {
+    renderButton({ idPrefix: 'prefix', menuItems: [{ label: 'Item' }] })
+    const button = getButton()
+    expect(button).toHaveAttribute('aria-controls', 'prefix-popup-test')
+    expect(button).toHaveAttribute('aria-haspopup', 'true')
   })
 
-  it.each([[' '], ['Spacebar']])('triggers click when %s key pressed', (key) => {
-    renderButton({ href: 'https://example.com' })
-    const link = screen.getByRole('button')
-    const clickSpy = jest.spyOn(link, 'click')
-    fireEvent.keyUp(link, { key })
-    expect(clickSpy).toHaveBeenCalled()
+  it('toggles popup aria-expanded and startPos', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    const button = getButton()
+
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+
+    fireEvent.click(button)
+    expect(button).toHaveAttribute('aria-expanded', 'true')
+    expect(screen.getByTestId('popup-menu')).toHaveAttribute('data-start-pos', 'null')
+
+    fireEvent.click(button)
+    expect(button).toHaveAttribute('aria-expanded', 'false')
   })
 
-  it('prevents default when Space pressed on anchor', () => {
-    renderButton({ href: 'https://example.com' })
-    const event = new KeyboardEvent('keyup', { key: ' ', bubbles: true, cancelable: true })
-    const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
-    screen.getByRole('button').dispatchEvent(event)
-    expect(preventDefaultSpy).toHaveBeenCalled()
+  it.each([
+    ['ArrowDown', 'first', 0],
+    ['ArrowUp', 'last', 1]
+  ])('keyboard menu navigation %s', (key, expectedPos, expectedIndex) => {
+    renderButton({ menuItems: [{ label: 'One' }, { label: 'Two' }] })
+    fireEvent.keyUp(getButton(), { key })
+    const menu = screen.getByTestId('popup-menu')
+    expect(menu).toHaveAttribute('data-start-pos', expectedPos)
+    expect(menu).toHaveAttribute('data-selected-index', String(expectedIndex))
   })
 
-  it('does not trigger click for non-space keys', () => {
+  it('does nothing for arrow keys when no menu', () => {
+    renderButton()
+    fireEvent.keyUp(getButton(), { key: 'ArrowDown' })
+    expect(screen.queryByTestId('popup-menu')).not.toBeInTheDocument()
+  })
+
+  it('does nothing for unrelated keys', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    fireEvent.keyUp(getButton(), { key: 'Enter' })
+    expect(screen.queryByTestId('popup-menu')).not.toBeInTheDocument()
+  })
+
+  it.each([
+    ['https://example.com', 'A'],
+    [null, 'BUTTON']
+  ])('renders as anchor or button', (href, tag) => {
+    renderButton({ href })
+    const el = getButton()
+    expect(el.tagName).toBe(tag)
+    if (href) {
+      expect(el).toHaveAttribute('href', href)
+      expect(el).toHaveAttribute('target', '_blank')
+    } else expect(el).toHaveAttribute('type', 'button')
+  })
+
+  it.each([[' '], ['Spacebar']])('triggers click on anchor key %s', (key) => {
     renderButton({ href: 'https://example.com' })
-    const clickSpy = jest.spyOn(screen.getByRole('button'), 'click')
-    fireEvent.keyUp(screen.getByRole('button'), { key: 'Enter' })
-    expect(clickSpy).not.toHaveBeenCalled()
+    const el = getButton()
+    const spy = jest.spyOn(el, 'click')
+    fireEvent.keyUp(el, { key })
+    expect(spy).toHaveBeenCalled()
   })
 
-  it('renders as button without href', () => {
-    renderButton()
-    const button = screen.getByRole('button')
-    expect(button.tagName).toBe('BUTTON')
-    expect(button).toHaveAttribute('type', 'button')
+  it('does not trigger click for other keys on anchor', () => {
+    renderButton({ href: 'https://example.com' })
+    const el = getButton()
+    const spy = jest.spyOn(el, 'click')
+    fireEvent.keyUp(el, { key: 'Enter' })
+    expect(spy).not.toHaveBeenCalled()
   })
 })

package/src/App/components/Markers/Markers.jsx

@@ -13,7 +13,7 @@ export const Markers = () => {
   const { markers, markerRef } = useMarkers()
 
   if (!mapStyle) {
-    return
+    return undefined
   }
 
   const defaultSvgPaths = markerSvgPaths.find(m => m.shape === markerShape)

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

@@ -12,11 +12,6 @@
 }
 
 // 2. Elements
-.im-c-marker__background {
-  // stroke: var(--map-overlay-halo-color);
-  // stroke-width: 1;
-}
-
 .im-c-marker__graphic {
   fill: var(--map-overlay-halo-color);
 }

package/src/App/components/Panel/Panel.jsx

@@ -6,9 +6,58 @@ import { useModalPanelBehaviour } from '../../hooks/useModalPanelBehaviour.js'
 import { useIsScrollable } from '../../hooks/useIsScrollable.js'
 import { Icon } from '../Icon/Icon'
 
+const computePanelState = (bpConfig, triggeringElement) => {
+  const isAside = bpConfig.slot === 'side' && bpConfig.initiallyOpen && !bpConfig.modal
+  const isDialog = !isAside && bpConfig.dismissable
+  const isModal = bpConfig.modal === true
+  const isDismissable = bpConfig.dismissable !== false
+  const shouldFocus = Boolean(isModal || triggeringElement)
+  const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
+  return { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl }
+}
+
+const getPanelRole = (isDialog, isDismissable) => {
+  if (isDialog) {
+    return 'dialog'
+  }
+  if (isDismissable) {
+    return 'complementary'
+  }
+  return 'region'
+}
+
+const buildPanelClassNames = (slot, showLabel) => [
+  'im-c-panel',
+  `im-c-panel--${slot}`,
+  !showLabel && 'im-c-panel--no-heading'
+].filter(Boolean).join(' ')
+
+const buildPanelBodyClassNames = (showLabel, isDismissable) => [
+  'im-c-panel__body',
+  !showLabel && isDismissable && 'im-c-panel__body--offset'
+].filter(Boolean).join(' ')
+
+const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissable, isModal, width, panelClass }) => ({
+  id: elementId,
+  'aria-labelledby': `${elementId}-label`,
+  tabIndex: shouldFocus ? -1 : undefined, // nosonar
+  role: getPanelRole(isDialog, isDismissable),
+  'aria-modal': isDialog && isModal ? 'true' : undefined,
+  style: width ? { width } : undefined,
+  className: panelClass
+})
+
+const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }) => ({
+  ref: bodyRef,
+  className: panelBodyClass,
+  tabIndex: isBodyScrollable ? 0 : undefined, // nosonar
+  role: isBodyScrollable ? 'region' : undefined,
+  'aria-labelledby': isBodyScrollable ? `${elementId}-label` : undefined
+})
+
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html, children }) => {
+export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html, children, isOpen = true, rootRef }) => {
   const { id } = useConfig()
   const { dispatch, breakpoint, layoutRefs } = useApp()
 
@@ -16,54 +65,48 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   const bpConfig = panelConfig[breakpoint]
   const elementId = `${id}-panel-${stringToKebab(panelId)}`
 
-  const isAside = bpConfig.slot === 'side' && bpConfig.initiallyOpen && !bpConfig.modal
-  const isDialog = !isAside && bpConfig.dismissable
-  const isModal = bpConfig.modal === true
-  const isDismissable = bpConfig.dismissable !== false
-  const shouldFocus = Boolean(isModal || props?.triggeringElement)
+  const { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
+
+  // For persistent panels, gate modal behaviour on open state
+  const isModalActive = isModal && isOpen
 
-  const buttonContainerEl = bpConfig.slot.endsWith('button') ? props?.triggeringElement?.parentNode : undefined
   const mainRef = layoutRefs.mainRef
-  const panelRef = useRef(null)
+  const internalPanelRef = useRef(null)
   const bodyRef = useRef(null)
+  const prevIsOpenRef = useRef(isOpen)
   const isBodyScrollable = useIsScrollable(bodyRef)
 
+  // Merge internal ref with optional external rootRef
+  const panelRef = rootRef || internalPanelRef
+
   const handleClose = () => {
     requestAnimationFrame(() => { (props?.triggeringElement || layoutRefs.viewportRef.current).focus?.() })
     dispatch({ type: 'CLOSE_PANEL', payload: panelId })
   }
 
-  useModalPanelBehaviour({ mainRef, panelRef, isModal, isAside, rootEl, buttonContainerEl, handleClose })
+  useModalPanelBehaviour({ mainRef, panelRef, isModal: isModalActive, isAside, rootEl, buttonContainerEl, handleClose })
 
   useEffect(() => {
-    if (shouldFocus) {
-      panelRef.current.focus()
-    }
-  }, [])
+    // Focus on initial mount (non-persistent) or when isOpen transitions to true (persistent)
+    const justOpened = isOpen && !prevIsOpenRef.current
+    prevIsOpenRef.current = isOpen
 
-  const panelClass = [
-    'im-c-panel',
-    `im-c-panel--${bpConfig.slot}`,
-    !panelConfig.showLabel && 'im-c-panel--no-heading'
-  ].filter(Boolean).join(' ')
-
-  const panelBodyClass = [
-    'im-c-panel__body',
-    !panelConfig.showLabel && isDismissable && 'im-c-panel__body--offset'
-  ].filter(Boolean).join(' ')
+    if (shouldFocus && (justOpened || isOpen)) {
+      panelRef.current?.focus()
+    }
+  }, [isOpen])
 
+  const panelClass = buildPanelClassNames(bpConfig.slot, panelConfig.showLabel)
+  const panelBodyClass = buildPanelBodyClassNames(panelConfig.showLabel, isDismissable)
   const innerHtmlProp = useMemo(() => html ? { __html: html } : null, [html])
 
+  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissable, isModal, width: bpConfig.width, panelClass })
+  const bodyProps = buildBodyProps({ bodyRef, panelBodyClass, isBodyScrollable, elementId })
+
   return (
     <div // nosonar
       ref={panelRef}
-      id={elementId}
-      aria-labelledby={`${elementId}-label`}
-      tabIndex={shouldFocus ? -1 : undefined} // nosonar
-      role={isDialog ? 'dialog' : (isDismissable && 'complementary') || 'region'}
-      aria-modal={isDialog && isModal ? 'true' : undefined}
-      style={bpConfig.width ? { width: bpConfig.width } : undefined}
-      className={panelClass}
+      {...panelProps}
     >
       <h2
         id={`${elementId}-label`}
@@ -83,22 +126,9 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
       )}
 
       {innerHtmlProp
-        ? (
-          <div // nosonar
-            ref={bodyRef}
-            className={panelBodyClass}
-            tabIndex={isBodyScrollable ? 0 : undefined} // nosonar
-            dangerouslySetInnerHTML={innerHtmlProp}
-          />
-          )
+        ? <div {...bodyProps} dangerouslySetInnerHTML={innerHtmlProp} /> // nosonar
         : (
-          <div // nosonar
-            ref={bodyRef}
-            className={panelBodyClass}
-            tabIndex={isBodyScrollable ? 0 : undefined} // nosonar
-            role={isBodyScrollable ? 'region' : undefined}
-            aria-labelledby={isBodyScrollable ? `${elementId}-label` : undefined}
-          >
+          <div {...bodyProps}> {/* nosonar */}
             {WrappedChild ? <WrappedChild {...props} /> : children}
           </div>
           )}

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

@@ -11,14 +11,12 @@
         $type: panel
     );
 
-    & {
-        display: flex;
-        flex-direction: column;
-        max-height: 100vh;
-        min-width: var(--min-panel-width);
-        pointer-events: auto;
-        background-color: var(--background-color);
-    }
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    min-width: var(--min-panel-width);
+    pointer-events: auto;
+    background-color: var(--background-color);
 }
 
 // 2. Elements
@@ -39,22 +37,20 @@
         $type: button
     );
 
-    & {
-        border: 0;
-        position: absolute;
-        top: var(--panel-close-button-gap);
-        right: var(--panel-close-button-gap);
+    border: 0;
+    position: absolute;
+    top: var(--panel-close-button-gap);
+    right: var(--panel-close-button-gap);
 
-        padding-left: var(--button-padding);
-        padding-right: var(--button-padding);
+    padding-left: var(--button-padding);
+    padding-right: var(--button-padding);
 
-        min-height: var(--button-size);
-        min-width: var(--button-size);
+    min-height: var(--button-size);
+    min-width: var(--button-size);
 
-        color: var(--foreground-color);
-        background-color: transparent;
-        cursor: pointer;
-    }
+    color: var(--foreground-color);
+    background-color: transparent;
+    cursor: pointer;
 }
 
 .im-c-panel__body {
@@ -77,9 +73,7 @@
         transition: background-color var(--duration) ease;
     }
 
-    & {
-        background-color: var(--button-hover-color);
-    }
+    background-color: var(--button-hover-color);
 }
 
 // 3. Modifiers

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

@@ -4,6 +4,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { Panel } from './Panel'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext'
+import { useIsScrollable } from '../../hooks/useIsScrollable.js'
 
 jest.mock('../../store/configContext', () => ({ useConfig: jest.fn() }))
 jest.mock('../../store/appContext', () => ({ useApp: jest.fn() }))
@@ -61,6 +62,23 @@ describe('Panel', () => {
       renderPanel({ desktop: { slot: 'side', dismissable: true, initiallyOpen: true, width: '300px' } })
       expect(screen.getByRole('complementary')).toHaveStyle({ width: '300px' })
     })
+
+    it('adds scrollable attributes to body when content overflows', () => {
+      // 1. Force the mock to true ONLY for this test
+      useIsScrollable.mockReturnValue(true)
+
+      const { container } = renderPanel()
+
+      // 2. Target by class to avoid role collision with the parent panel
+      const body = container.querySelector('.im-c-panel__body')
+
+      expect(body).toHaveAttribute('tabIndex', '0')
+      expect(body).toHaveAttribute('role', 'region')
+      expect(body).toHaveAttribute('aria-labelledby', 'app-panel-settings-label')
+
+      // 3. IMPORTANT: Reset to false so other tests don't see two regions
+      useIsScrollable.mockReturnValue(false)
+    })
   })
 
   describe('role and aria attributes', () => {